Add multiple instances of a VueJS component to a template?

Question

I'm new to VueJS and would like to add multiple instances of the card component template to the VuetifyJS PWA template. What I tried:

I created a News.vue file with the card template code.
I added a new Vue instance to main.js

new Vue({ el: '#news', router, template: '', components: { News } })

I added News to index.js:

import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import News from '@/components/News'

Vue.use(Router)

export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello }, { path: '/', name: 'News', component: News } ] })

Adding <news></news> multiple times to the Hello.vue template -to show the News.vue template content- didn't work. What did I do wrong?

Hello.vue code: https://github.com/vuetifyjs/docs/blob/master/examples/layouts/google-contacts.vue

Also, you have 2 paths pointing to the same place, this will generate warnings in the console. I assume you just want the first one (which it will use by default) as the Hello component is the one that will show the news components. — webnoob
@webnoob This is the code inside Hello.vue: github.com/vuetifyjs/docs/blob/master/examples/layouts/… — Tom
You said you added <news></news> to the Hello.vue template. You've just linked the vuetify code, not your code you've tried it with. — webnoob
Sorry, here it is: Hello.vue code. I added the <news></news> tags only at the top. <template> <v-app id="inspire"> <news></news> <news></news> <news></news> <v-navigation-drawer fixed clipped app v-model="drawer" > [...] Everything else is the same code as in the example: github.com/vuetifyjs/docs/blob/master/examples/layouts/… — Tom

webnoob webnoob · Accepted Answer · 2017-12-25T17:59:33

In order to add a component to your Hello.vue you need to declare it, like so:

import News from './path/to/components/News.vue

export default {
  components: {
    News
  }
}

You will obviously just add the component prop if it doesn't exist in your existing example or add the News variable to the existing one if it does. Based on the link you've provide, you will need to add the component prop - I would do so just below the props property.

This will allow you to use <news></news> within your template and it will render the content of your News component.

There is lots of information on declaring components in the Vue Docs including information on how to declare globally so you don't have to declare on multiple components.

Add multiple instances of a VueJS component to a template?

1 Answers