Multiple Single File Components and Vue Webpack Template

Question

I have used https://github.com/vuejs-templates/webpack to set up a simple Vue site. This template comes with one single file component (App.vue). I am trying to figure out how would I build a site with multiple single file components?

For example, let's say I have a webpage that has four single file components on it: a table component that can sort and paginate the table data, a filter component that filters the table data, a button component that has a number of buttons like new/edit/delete, and a header component that has a drop down with options that when selected swap out the available filters and the data in the table.

I assume I would create four .vue pages (Table.vue, Filter.vue, Button.vue, and Header.vue) but I'm not really certain how to include them all on the same page. I assume I would use App.vue as the container for the other four single file components, but I'm not sure how to include the other four .vue pages into the App single file component. Should there be references to them in main.js?

thanksd thanksd · Accepted Answer · 2017-05-11T16:13:01

Import them into whichever parent component definition you are using them in and register them in the components property of the parent component:

import MyTable from 'path/to/Table'
import MyFilter from 'path/to/Filter'
import MyButton from 'path/to/Button'
import MyHeader from 'path/to/Header'

export default {
  components: { MyTable, MyFilter, MyButton, MyHeader },
}

Then, you can use their tags in the parent component's template:

<my-table></my-table>
<my-filter></my-filter>
<my-button></my-button>
<my-header></my-header>

Alternatively, you could register them globally in main.js:

import Table from 'path/to/Table'

Vue.component('my-table', Table);

This way you could use the <my-table> tag in any component without having to register it to that component.

Multiple Single File Components and Vue Webpack Template

1 Answers