Local Components

Nesting components

Previously, we have created global components using app.component(). This means they are instantly available for use anywhere in our app. This includes sub-components, which are components nested inside of others.

For example, we could place our app-header component inside of the blog-post component. We add this inside the template:

app.component("blog-post", {
    props: ["post"],
    template: `
    <article>
    // Add header component:
    <app-header></app-header>
    <h3>{{post.title}}</h3>
    <p v-html="post.body"></p>
    <p class="read_more">Read More</p>
    </article>
    `,
});

Reload the browser, and the header will repeat for each post.

Creating local components

Unless you specifically want this behaviour, we can also restrict the use of the components by registering them locally. Local registration involves moving away from app.component and creating JavaScript objects. This needs to be added above createApp():

// Create 2x new constants:
const appHeader = {};
const blogPost = {};

const app = Vue.createApp({

We can now move the contents over from our global components to these new objects:

• Copy the contents from the app-header component, paste inside the appHeader object.
• Copy the contents from the blog-post component, paste inside the blogPost object.

Your local components should now look like this:

const appHeader = {
    data() {
        return {
            name: "Homer Simpson",
            links,
        };
    },
    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>`,
};

const blogPost = {
    props: ["post"],
    template: `
    <article>
    <app-header></app-header>
    <h3>{{post.title}}</h3>
    <p v-html="post.body"></p>
    <p class="read_more">Read More</p>
    </article>
`,
};

Registering local components

Then we register our intent to use these components inside of createApp:

const app = Vue.createApp({
    components: {
    "blog-post": blogPost,
    "app-header": appHeader,
    },
    // ...

A few things to note here:

• The JavaScript object must be already created above createApp so it can access them.
• If we have multiple Vue instances, we can now control which ones have access to the components.

After a browser refresh, note that our header component is no longer appearing in each blog post. Remember, we still have this contained in the blogPost template:

const blogPost = {
    props: ["post"],
    template: `
    <article>
    // app header component:
    <app-header></app-header>
    <h3>{{post.title}}</h3>
    <p v-html="post.body"></p>
    <p class="read_more">Read More</p>
    </article>
`,
};

Why? app-header is a sub-component of blogPost, our components are now local rather than global, therefore we don’t have access anywhere we want.

If we wanted to access the app-header sub-component, we need to also pass the components option into blogPost:

const blogPost = {
    props: ["post"],
    components: {
    "app-header": appHeader,
    },
// ...

Placing a header component in each blog post.

Congratulations!

We hope you have enjoyed this project and gained some valuable practice!