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.

Get my FREE book on Vue 3!

Vue 3 Book