title: vue-router Uncaught ReferenceError: router is not defined
body: <p>I'm reviewing Vue and it's router component, although I'm having some issues getting the router component to work. Error in console below:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: router is not defined</p>
  </blockquote>
  
  <p>Hi all, </p>
  
  <p>I'm importing the Vue and VueRouter into an <code>index.html</code> and trying my best to read the documentation to get the router initialized, but cannot seem to it working.</p>
  
  <p>In <code>index.html</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script type="module" src="/assets/js/main.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vue-router/dist/vue-router.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>In <code>main.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>import VueRouter from 'vue-router'
  
  Vue.use(VueRouter)
  
  var router = new VueRouter({
    routes: [
      { path: 'home', component: home } 
    ]
  });
  
  var app = new Vue({
    router,
    el: '#app',
    data: {
      ...etc
  </code></pre>
  
  <p>Help would be appreciated...</p>
  
  <p>Many thanks.</p>