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.
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.