How to 'import' a Vue component into a Vue component

Question

This may be a really silly question, but nonetheless, something I can't find an answer to.

So, I am building up a Vue component and would like to access vue-spinner's component(s) inside of my component. How would I do that?

Here are snippets of the code in question:

app.js:

Vue.component('players', require('./components/TeamPlayersComponent.vue'));

import GridLoader from 'vue-spinner/src/GridLoader.vue';

const app = new Vue({
    el: '#app',
    components: {
        GridLoader
    }
});

TeamPlayersComponent.vue:

<grid-loader></grid-loader>

Assume that vue-spinner has been installed (NPM) and that the TeamPlayersComponent.vue is valid and working other than giving this error in the console:

vue.js?3de6:525 [Vue warn]: Unknown custom element: <grid-loader> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in component <players> at /home/vagrant/code/rounds-smaa/resources/assets/js/components/TeamPlayersComponent.vue)

I am using Vue with Laravel Elixir and Gulp.

Answer 1

You can get it by following:

var PulseLoader = require('vue-spinner/src/PulseLoader.vue');

and add it in components:

new Vue({
  components: {
    'PulseLoader': PulseLoader
  }
})

Answer 2

Solution:

Replace the GridLoader specific code in app.js (Laravel setup) with:

Vue.component('grid-loader', require('vue-spinner/src/GridLoader.vue'));

Worked as expected!