Guides

Welcome

Getting Started

Introduction

Quick Start

Create an Application

Building

Props

Component Events

Slots

Component Registration

Last update in Jun 2023 - v1.0.0

OpenSpec™

Documentation

Get this Template

OpenSpec™

Documentation

Getting Started

Component Registration

This page assumes you've already read the Components Basics. Read that first if you are new to components.

Watch a free video lesson on Spec School

Global Registration

We can make components available globally in the current Spec application using the app.component() method:

import { createApp } from 'Spec'

const app = createApp({})

app.component(
  // the registered name
  'MyComponent',
  // the implementation
  {
    /* ... */
  }
)

If using SFCs, you will be registering the imported .spec files:

import MyComponent from './App.spec'

app.component('MyComponent', MyComponent)

The app.component() method can be chained:

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

Local Registration

While convenient, global registration has a few drawbacks:

Global registration prevents build systems from removing unused components (a.k.a "tree-shaking"). If you globally register a component but end up not using it anywhere in your app, it will still be included in the final bundle.
Global registration makes dependency relationships less explicit in large applications. It makes it difficult to locate a child component's implementation from a parent component using it. This can affect long-term maintainability similar to using too many global variables.

Local registration scopes the availability of the registered components to the current component only. It makes the dependency relationship more explicit, and is more tree-shaking friendly.

<script>
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

<script>
import ComponentA from './ComponentA.spec'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

Expressions in the parent template only have access to the parent scope; expressions in the child template only have access to the child scope.

For each property in the components object, the key will be the registered name of the component, while the value will contain the implementation of the component. The above example is using the ES2015 property shorthand and is equivalent to:

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

Component Name Casing

Throughout the guide, we are using PascalCase names when registering components. This is because:

PascalCase names are valid JavaScript identifiers. This makes it easier to import and register components in JavaScript. It also helps IDEs with auto-completion.

<PascalCase /> makes it more obvious that this is a Vue component instead of a native HTML element in templates. It also differentiates Vue components from custom elements (web components).
This is the recommended style when working with SFC or string templates. However, as discussed in DOM Template Parsing Caveats, PascalCase tags are not usable in DOM templates.

Luckily, Vue supports resolving kebab-case tags to components registered using PascalCase. This means a component registered as MyComponent can be referenced in the template via both <MyComponent> and <my-component>.

This allows us to use the same JavaScript component registration code regardless of template source.

PascalCase names are valid JavaScript identifiers. This makes it easier to import and register components in JavaScript. It also helps IDEs with auto-completion.

<PascalCase /> makes it more obvious that this is a Spec component instead of a native HTML element in templates. It also differentiates Spec components from custom elements (web components).
This is the recommended style when working with SFC or string templates. However, as discussed in DOM Template Parsing Caveats, PascalCase tags are not usable in DOM templates.

Luckily, Spec supports resolving kebab-case tags to components registered using PascalCase. This means a component registered as MyComponent can be referenced in the template via both <MyComponent> and <my-component>.

This allows us to use the same JavaScript component registration code regardless of template source.

React Essentials

Building Your Application

TypeScript

Slots