title: Access Vue from external files
body: <p>I would like to define my routes in an external file for readability.</p>
  
  <p>My <code>main.js</code> file is where I initiate my Vue app. Seen below:</p>
  
  <pre><code>import Vue from 'vue'
  import VueRouter from 'vue-router'
  import App from './App'
  
  vue.use(VueRouter)
  
  // I would like these route definitions to be contained in their own file
  var Monday = Vue.extend({ template: '&lt;div&gt;Monday view&lt;div&gt;' })
  var Tuesday = Vue.extend({ template: '&lt;div&gt;Tuesday view&lt;div&gt;' })
  ...
  
  var router = new VueRouter()
  
  router.map({
    '/monday': { component: Monday },
    '/tuesday': { component: Tuesday }
  
  router.start(App, 'body)
  </code></pre>
  
  <p>I would prefer to separate the route definitions <code>var Monday = Vue.extend({ ... })</code> etc, into their own files for readability when the application scales.</p>
  
  <p>The problem: if I was to create a <code>RouteDefinitions.js</code> file, I don't have access to "Vue", which I need to define <code>Vue.extend</code>. Should I <code>import Vue from 'vue'</code> <strong>again</strong> from inside RouteDefinitions.js? Is this a red flag? Or should I simply keep all my route logic inside main.js? </p>