Michael Thiessen

Multiple Components in One File

August 2021

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.

Related Articles