Using Moment with Vue.js from CDN link

I have included the following CDN link into my html page:

    <!--Moment.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue-moment@4.0.0-0/vue-moment.min.js">
    </script>

I have placed this in the head and at one time instead placed it closer to the body end tag.
In both cases, I am getting the following error when attempting to reference ‘moment’ in my vue.js code:

Error in render: "ReferenceError: 'moment' is undefined"

I get the error when I use the following code:

	methods: {
		filterByActiveStatus: function(){	
			var a = moment('7/11/2010','M/D/YYYY');
			var b = moment('12/12/2010','M/D/YYYY');
			var diffDays = b.diff(a, 'days');
			alert(diffDays);		
        }			

I at one time even tried require - but the name, ‘require’ was not defined.
What do I need to do to use CDN (I am unable at this time to use node.js, but will be so glad when I am).

Vue-moment is only a wrapper, for moment. It does NOT include moment itself. You need to include the moment library, then also include this library.

Secondly, since this is a wrapper of moment for Vue, straight up using moment() in your code like you are doing wont work, the vue-moment documentation shows you that the moment object, is injected to all vue instances on this.$moment

But even then, you dont need to use vue-moment, if you want to straight up use moment() like in your code. Just load moment.

Edit: But also looking at this, you wont be able to use this plugin directly in the browser due to the usage of require. So I would just ignore this library, and straight up use moment directly.

How do I “load moment”? I can’t use npm or node.js - it has to be CDN link (or other NON installation) - is that possible? I tried several other links with the same issue?

Then find the moment CDN. Go to moments website and download the library, or find a CDN for it.

I went to moments library - all they had was npm. I went to google CDN for moment and I keep getting the ‘moment’ isn’t recognized…

I dont mean to be rude, but I googled momentjs CDN and in the first google result. (note visit this page, dont directly add this link)

Edit, also on the momentjs DOCS page there is a section for browsers that talks about CDN usage.
https://momentjs.com/docs/

You googled exactly what I googled. I used the link - I keep getting the error.

You keep getting what error? That doesnt help me. You need to provide me with full details. Are you trying to include the link I added in there directly (Which I mentioned not to do) Or did you visit the link, and find the CDN link to add?

Also where are you adding it, can you show me full HTML, if you are loading it after your app,js you will get that error, or perhaps you’re using the wrong URL. Paste in here your HTML page.

To answer your first question - the error is in my first post above.
To answer your second question - I went to the site and added the following links:

    <!--Moment.js-->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"</script>

Per my first post above - I added it to the head first, and at another time I added it towards the end tag of the body.

My html page (using back ticks - I hope I’m doing this right):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" lang="en-US" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <meta name="GENERATOR" content="Microsoft SharePoint" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Expires" content="0" />
    
    <title>TruView Development Active Incidents Dashboard</title>
    
    <!--<link rel="stylesheet" href="Styles/dashboard.css"/>-->
    <link rel="stylesheet" href="https://connect.transunion.com/sites/truview/DevDocuments/dashboard.css"/>
    <!--Moment.js-->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"</script>
<body> 
	
	<div id="wrapper">
		<dash-header></dash-header>
		<dash-side-l  @display-incident-data='DisplayIncidentData'></dash-side-l>
		<dash-center :incident-Data='incidentData'></dash-center>
		<dash-side-r :incident-Data='incidentData' :is-Available='isAvailable'></dash-side-r>
	</div>
	
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>	
		<script src="https://connect.transunion.com/sites/truview/DevDocuments/jquery-1.12.2.min.js"></script> 
    <script src="https://connect.transunion.com/sites/truview/DevDocuments/index-script.js"></script>

   <!--<script src="Scripts/jquery-1.12.2.min.js"></script> 
    <script src="Scripts/index-script.js"></script>-->
    
		<!-- Automatically provides/replaces `Promise` if missing or broken. -->
		<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script> 

		<!-- Minified version of `es6-promise-auto` below. -->
		<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>  
		
		<script src='https://cdn.polyfill.io/v2/polyfill.min.js'></script>   
</body>
</html>

My 2nd attempt places the scripts just above the end tag for body. same error.

First: Whereis your application code? I dont see any reference to loading your code to give me an idea of your order of operations here.

Secondly, you are adding both the minified, and unminified version of moment (and moment-with-locales.min) . You’re essentially downloading the library twice. Just load the min version. You do not need to load both moment.js and moment.min.js

Secondly, you’re loading TWO versions of VueJS. Remove one.

Regarding the duplicate version - I understand. I just don’t understand which ones are the right ones. I figured I was doing that - but I just don’t understand these links and what’s what. Sorry - I’m not well versed (can you tell??) in those kinds of issues. As for the order of things - I can paste my code here - but it’s an indentation night-mare. Is there some way I can paste it bits at a time?

Here is my application root. It is NOT the component that calls the moment functionality - but it IS my root:

// APPLICATION ROOT ///////////////////////////////////////////////////////
// Child Components:  
//   dash-header; dash-side-l (child: dash-panel-l); 
//   dash-center; dash-side-r (child: dash-panel-r)
var app = new Vue({
	el: '#wrapper',
	router: router,
	data: {
		isAvailable: false,
		incidentData: {
			"@lang": "",
			"Region": "",
			"IR": "No Incident Selected",
			"IncidentPriority": "",
			"Title": "N/A",
			"Date": "",
			"IMUpdates": 
			  [{
					"IMUpdateTimestamp": "",
					"SendUpdate": ""
			  }],
			"Concern": "",
			"CI": "",
			"Status": "",
			"TransactionalImpact": "",
			"DATable": 
			  [{
			   "WorkStream": "",
			   "OwningTeam": ""
			  }],
			"IncidentManager": "",
			"ChatHyperlink": "",
			"BridgeDetails": ""
		}
	},
	methods: {
		// This method is called when page loads AND when an incident is selected.
		DisplayIncidentData: function(incident, region){
			xm = this;
			// Initialized Incident Data (when no region is selected).
			xm.incidentData = {
				"@lang": "",
				"Region": "",
				"IR": "No Incident Selected",
				"IncidentPriority": "",
				"Title": "N/A",
				"Date": "",
				"IMUpdates": 
				  [{
						"IMUpdateTimestamp": "",
						"SendUpdate": ""
				  }],
				"Concern": "",
				"CI": "",
				"Status": "",
				"TransactionalImpact": "",
				"DATable": 
				  [{
				   "WorkStream": "",
				   "OwningTeam": ""
				  }],
				"IncidentManager": "",
				"ChatHyperlink": "",
				"BridgeDetails": ""
			};
			
			// ajax call to fetch data from Incident-specific xml file 
			$.ajax({
				//sharepoint url where (incident).txt (JSON File) is saved 
			  url: "https://connect.transunion.com/sites/truview/DevIncLibDash/" + region + "/" + incident + ".txt",
			  dataType: "text",
			  success: function (data) {
			      if (data != null) {  // If library.txt file is not empty 
			      	var incidentData = JSON.parse(data); 
			      	xm.incidentData = incidentData;
							if (xm.incidentData.ChatHyperlink == ""){
								xm.isAvailable = false;
							} else {
								xm.isAvailable = true;
							}	
			      } else {
			      	xm.isAvailable = false;
			      }
			      
			  }
			}); 

		}
	}
})

This is the component where the function call to the moment is:

// DASHBOARD - LEFT ///////////////////////////////////////////////////////
//   Main section where Incidents are sorted and organized into priorities.
//   Child Component: dash-panel-l
Vue.component('dash-side-l',{
	template: "<div class='dash-side-l'>" +
							"<div class='dash-panel'>" +
							"<h1>Region</h1>" +
							"<table>" +
								"<tr>" +
										"<td>" +
										"<select :value='selectedRegion' @change='$router.push({query: {region: $event.target.value },})' id='selRegion'>" + 
											"<option v-for='region in regions' :value='region.value'>{{region.description}}</option>" +
										"</select>" +
										"</td>" +
									"</tr>" +
							"</table>" +
							"</div>" +
   						"<dash-panel-l :filteredIncidents='filteredIncidents' @get-incident-data='GetIncidentData'></dash-panel-l><hr/>" +
						"</div>",
	data: function() {
		return {
			incidentsData: [],
			// Lookup Data for Region drop-down
			regions: [
				{"value":"","description":"Select a Region"},
				{"value":"USA","description":"United States"},
				{"value":"CAN","description":"Canada"},
				{"value":"MEX","description":"Mexico"},
				{"value":"COL","description":"Colombia"}
			],				
			selectedRegion: null
		}
	},
	methods: {
			filterByActiveStatus: function(item){
				// Method to filter incident data by Active Status 
				// (see activeIncidents computed property below)
		
				var a = moment('7/11/2010','M/D/YYYY');
				var b = moment('12/12/2010','M/D/YYYY');
				var diffDays = b.diff(a, 'days');
				alert(diffDays);					
				if (item.IncidentPriority < 5 && (item.status.indexOf('In Progress') > -1 || item.status.indexOf('Restored') > -1)){
		 			return true;
				} else {
					return false;
				}
			},
			filterByClosedStatus: function(item){
				// Method to filter incident data by Closed Status (last seven days) 
				// (see closedIncidents computed property below)
				if (item.IncidentPriority < 5 && (item.status.indexOf('Closed') > -1)){
		 			return true;
				} else {
					return false;
				}
			},			
			GetIncidentData: function(incident){
				// Called when an incident is selected from left-side panel (Child-Component)
				this.$emit('display-incident-data', incident, this.selectedRegion);
			}
	},
	computed: {
			filteredIncidents: function(){
				// Filters activeIncidents data by the selected region
				// (from query string OR drop-down selected value)
				return vm.activeIncidents.filter(function(incident){
	        if (vm.selectedRegion) {
	         		return incident.Region === vm.selectedRegion;
	        }	        
				})
			},
			activeIncidents: {
				// Pulls only Active (In-Progress & Restored incidents)
				// (including Reconvene) from incidentsData
				get: function(){
					if(this.incidentsData){
						this.incidentsData.sort(function(a,b) {return (b.IncidentPriority > a.IncidentPriority) ? 1 : ((a.IncidentPriority > b.IncidentPriority) ? -1 : 0);} );
					}
					return this.incidentsData.filter(this.filterByActiveStatus);
				},
				set: function(newValue){
					return newValue;
				}		
			}
	},
	created: function(){
    // Created Hook - when page loads.
    // Incidents are retrieved and filtered from JSON file - and displayed on left side panel.
    // Top sorted incident is highlighted and another JSON file with the incident's data is retrieved.
    // Data from this incident object is displayed on the center and right side panels.
    // Data displayed can change under following conditions:
    // Page reloaded/refreshed; New Region selectd from drop-down; New Incident on left is clicked.
		vm = this;

		// ajax call to fetch data from library.txt file 
		$.ajax({  
			//sharepoint url where library.txt is saved 			
		  url: "https://connect.transunion.com/sites/truview/DevIncLib/library.txt",
		  dataType: "text",
		  success: function (data) {
		      if (data != null) {  
		      	// If library.txt file is not empty 
		      	var incidentsData = JSON.parse(data); 
		      	vm.incidentsData = incidentsData;
		      }
		  }
		}); 
	},
	watch: {
	  '$route.query.region': {
	    handler: function() {
	    	// Populates the selectedRegion field with value from query string.
	      this.selectedRegion = this.$route.query.region;
	    },
	    immediate: true,
	  }
},	
})

I’m sure there are 100 mistakes since I don’t fully understand the power of vue.js yet, but these 2 pieces of code should show the flow of the app.

I have moved the var a = moment(etc…) code everywhere - from the created hook in the root, to the created hook in my 1st component (dash-side-l) and everywhere I get the same error that ‘moment’ is undefined.

You should start by cleaning up all the scripts in your html. Make sure you only include js once, otherwise you’ll have all sorts of conflicts. Not sure what your end goal is, but I’m not sure you even need vue-moment. Try loading just moment: https://jsfiddle.net/jamesbrndwgn/wxq03rd2/

vue-moment removed - duplicated scripts removed.

Did you ever get this working?