Vue 3 - Component Registration

Vue 3 is in beta and it’s subject to change.

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to register our components with Vue 3.

Component Names

When we register a component, we’ll have to give it a name.

For instance, we can register a component globally with the app.component method.

We can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <foo></foo>
    </div>
    <script>
      const app = Vue.createApp({});
      app.component("foo", {
        template: `
          <div>
            foo
          </div>
        `
      });
      app.mount("#app");
    </script>
  </body>
</html>

to create a foo component we can use in our Vue instance.

The name is lowercase and multiple words may be joined with a hyphen.

This convention will avoid conflicts with current and future HTML elements.

The casing of the name can be kebab case, which is joining the name with a hyphen.

We can also use PascalCase for the name.

However, only kebab-case is valid if we add the component directly to the DOM.

app.component registers a component globally. This means any component can use any other component in the code.

#web-development #javascript #programming #vue #developer

Component Names

medium.com

Vue 3 - Component Registration