Component registration

The basics of defining a component without caring about the contents here except for name.

Note that components actually work fine without name. The name doesn’t actually get used in the output element so I don’t know of its use.

See also the Single-file components section.

Resources

Vue 3 docs

• Component Registration
• Style Guide

Approaches

Plain object

Create a hash/dictionary object. For both Vue 2 and 3.

Export directly when using Node.

export default {
  name: "MyFoo",
  // ...
}

Create an object first and then export it, when using frontend only JS without node. If you use the component in the main script where it is defined, of course then you don’t need to export it.

const MyComponent = {
  name: "MyFoo",
  // ...
}

export default MyComponent

Add to app

Add a component directly to the app instance without defining it as a standalone object.

const app = Vue.createApp({})

app.component('my-foo', {
  // ...
})

Extends

I’ve used this before, but I don’t know when this is needed anymore.

import Vue from "vue";

export default Vue.extend({
  name: "MyFoo"
  // ...
})

TypeScript

For Vue 3:

import { defineComponent } from "vue";

export default defineComponent({
  name: "MyFoo"
  // ...
})