How to register global components with vue-router
<p>I'm using Vue.js with the vue-cli. I chose for the webpack setup.
I wired up the main.js file for routing, though I can't find a way to globally register my components.  </p>

<p>main.js</p>

<pre><code>import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Companies from './components/pages/Companies'
import Income from './components/pages/Income'
import Login from './components/pages/Login'

Vue.use(VueRouter)

let router = new VueRouter()

router.map({
  '/companies': {
    component: Companies
  },
  '/income': {
    component: Income
  },
  'login': {
    component: Login
  }
})

router.start(App, 'body')
</code></pre>

<p>App.vue</p>

<pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import {Auth} from './lib/api'
import Loader from './components/Loader'

export default {
  components: {
    Loader
  },
  ready () {
    Auth.isLoggedIn().then(
      (response) =&gt; {
        if (response.data === false) {
          this.$router.go('/login')
        } else {
          this.$router.go('/companies')
        }
      },
      (response) =&gt; {
        this.$router.go('/login')
      }
    )
  }
}
&lt;/script&gt;
</code></pre>

<p>When I use my Loader component in some view, I get the following warning.</p>

<blockquote>
  <p>[Vue warn]: Unknown custom element:  - did you register the component correctly? For recursive components, make sure to provide the "name" option.</p>
</blockquote>

<p>I provided the name in the component and it didn't make any difference. I'm using the loader-component in the login-view.<br>
I found out that I should either define the component in the component that I'm going to use it or globally. Though, I can't find out how to define it globally with the routing.</p>