CODEWITHSUNDEEP
vue.jsvue-component
AshMenhennett
AshMenhennett

Reputation: 1095

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

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.

Upvotes: 15

Views: 19195

Answers (4)

Eko Edita
Eko Edita

Reputation: 31

I think that you should register the component locally in TeamPlayersComponent.vue file. Import the component and register in the file.

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

Then register the component locally.

    components: {
                gridLoader
               }

Upvotes: 3

Sumit Patel
Sumit Patel

Reputation: 82

You could also import as follows:

import grid-loader from "vue-spinner/src/GridLoader.vue";

and then in then in the component where you want to import it:

components: { grid-loaderfrom }

Upvotes: 1

AshMenhennett
AshMenhennett

Reputation: 1095

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!

Upvotes: 5

Saurabh
Saurabh

Reputation: 73609

You can get it by following:

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

and add it in components:

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

Upvotes: 14

Related Questions