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.

Multiple Components in One File

Export multiple components

Related Articles

How to Dynamically Add a Class Name in Vue

How to Implement a Mouseover or Hover in Vue

The correct way to force Vue to re-render a component

How to Call a Method on Page Load in Vue 3 (with Reset)

Your code works — but do you know if it's any good?

Your code works —
but do you know if it's any good?