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 · Accepted Answer · 2017-05-11 16:18:11Z

1

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.

edited May 11, 2017 at 16:18

answered May 11, 2017 at 16:13

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

Collectives™ on Stack Overflow

Multiple Single File Components and Vue Webpack Template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related