Vue Components

As web projects get more complex, breaking up structure into more manageable parts known as components may become necessary. Components allow for a project's UI to be divided into reusable pieces, and in Vue, these Components can be defined with their own name, data, and methods.

Before a Vue component can be used, it must be registered. Component Registration can come in two forms: global or local.

Global Registration

Components are made available globally using the app.component() method on the current Vue Application.

const app = Vue.createApp({})

app.component('MyComponent', {})

Once registered, global components can be used in the template of any component within the application.

<MyComponent />

Local Registration

Local components have a few advantages over global components. They can create a more efficient build and prevent name crashing among multiple global components. Local registration is done using the components option.

const app = Vue.createApp({
  components: {
    MyComponent: {},
  },
})

Local components are NOT available to decedent components and will only be accessible by the component containing the implementation of the component.