Learn-WebDevelopment.com home page Learn-WebDevelopment.com

First Look At Components

vue.js logo

A little HTML, CSS, & JavaScript knowledge if recommended for this course.

The Global Component

The previous lesson looked at the concept of single file components. These are components we place into a dedicated file to keep things organised. To do this, we need a more sophisticated set up which we will look at in the next section.

A component in it's own file is probably the most commonly used type of component, but first, we will discover some other ways of writing components, beginning with the global component.

First store our Vue instance into a constant:

const app = Vue.createApp({

We currently mount the app like this:

}).mount("body");

Change to the following:

});
app.mount("body");

This will now call mount on the app constant.

The component() method

This app variable is now a reference to our Vue app, and we can call a method on this app called component():

app.component();

// add component() above mount()
app.mount("body");

Component takes in two arguments, the first is the name of the component. Here we call our new component app-header:

app.component("app-header");

When using the CDN link as we are, this component name should be lower case, more than one word, and separated by dashes.

This is because we will insert this into our HTML just like a regular element, so we don’t want any naming clashes.

This naming convention also avoids us accidentally using reserved HTML element names such as header, nav, and h3 etc.

The second argument is an object, it's contents are a bit like a mini-app. It can have its own data, methods, and anything the regular Vue instance has, alongside the HTML we want to display.

The HTML template

We set this HTML as a string inside a template property:

app.component("app-header", {
  template: "<h1>app header component</h1>",
});

Using this name of app-header, we place it into our HTML file where we want it to display:

<!-- index.html -->
<body>
  <div :style="[darkModeSet ? darkMode : '', base]">
    <app-header></app-header>
    <header>

This is intended to be used for our header. Cut out the full header section from our html file:

    <body>
        <div :style="[darkModeSet ? darkMode : '', base]">
            <app-header></app-header>
      <!-- <header> section removed -->
            <main>

And paste it inside of your app-header component, in place of the h1 example:

app.component("app-header", {
    template: "<header>
    <h1>{{name}}'s Portfolio</h1>
    <nav>
        <ul>
            <li v-for="link in links" :key="link.id">
                <a :href="link.url">{{link.name}}</a>
              </li>
        </ul>
    </nav>
</header>",
});

The text editor may highlight a problem. This is because we are using quotes ("") to surround the HTML inside the template section. For multi-line HTML, we need to replace the quotes with backticks (``):

app.component("app-header", {
    template: `<header>
    <h1>{{name}}'s Portfolio</h1>
    <nav>
        <ul>
            <li v-for="link in links" :key="link.id">
                <a :href="link.url">{{link.name}}</a>
              </li>
        </ul>
    </nav>
</header>`,
});

Refresh the browser and you will notice the variable data is missing (links and name).

Creating a data section

For this to work we also need a data section. This is the same as used previously inside of createApp():

app.component("app-header", {
  data() {
    return {
      name: "Chris Dixon",
      links,
    };
  },
  template: `
  // ...

This makes our name and links now available to use inside the template.