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.

Have you tried any of the suggested methods in the documentation. Please share what you have tried so far. — Nora
– Nora, Commented Jan 4, 2017 at 9:39

Saurabh · Accepted Answer · 2017-01-04 09:39:14Z

14

You can get it by following:

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

and add it in components:

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

answered Jan 4, 2017 at 9:39

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AshMenhennett · Accepted Answer · 2017-01-04 10:01:54Z

5

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!

answered Jan 4, 2017 at 10:01

AshMenhennett

1,0955 gold badges14 silver badges25 bronze badges

Comments

Eko Edita · Accepted Answer · 2018-07-07 12:32:51Z

3

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
               }

answered Jul 7, 2018 at 12:32

Eko Edita

311 bronze badge

Comments

Mel Macaluso · Accepted Answer · 2018-06-19 04:58:44Z

1

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 }

edited Jun 19, 2018 at 4:58

Mel Macaluso

3,9402 gold badges15 silver badges26 bronze badges

answered May 1, 2018 at 13:53

Sumit Patel

824 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related