Multiple Components in One File

Every now and then you just need a small component, one that's not worth an entirely new file:

// A small, secondary component
const SmallComponent = {
// Create a component like you normally would
data() {
//...
},
computedProps: {
//...
},
// Use the template property instead of a template block
template: `
<div>Hello!</div>
`
};
// Your main component
export default {
components: { SmallComponent },
// ...
};

This is perfect for reusing code within a component, where a v-for doesn't work.

However, if the code is more complex or is likely to be used by other components, making a proper reusable component is the best way to go.

Export multiple components

You can also export multiple components by adding the export keyword:

export const SmallComponent = {
// Create a component like you normally would
data() {
//...
},
computedProps: {
//...
},
// Use the template property instead of a template block
template: `
<div>Hello!</div>
`
};

To import this, you'll have to use a slightly different syntax:

import MainComponent, { SmallComponent } from './MultipleComponentsInOneFile.vue';

Note: You can get proper syntax highlighting of the HTML string using this VSCode extension.

Want to level up your Vue skills?

With over two million reads and 11,067 subscribers, you've come to the right place.

Subscribe now to get exclusive insights and tips every week.