Importing and Using Components in Nuxt 3

Part 7 of 8 in Upgrading Nuxt 2 to Nuxt 3
Dan Pastori avatar
Dan Pastori April 19th, 2022

When we migrated ROAST from Nuxt 2 to Nuxt 3, we had to review how we imported components. In Nuxt 2, we had to explicitly import the component into a page, layout, or parent component. In Nuxt 3, components are auto-imported. With later versions of Nuxt 2, you could have done this through the components plugin. However, if you are like me, you most likely still had explicit imports in your code. Let’s take a look on how to update your app to use the auto imports provided by Nuxt 3.

Importing and Using Components in Nuxt 2

When you had to import components in Nuxt 2, you had to explicitly import each component every time you used it. Luckily, Nuxt 2 came with the helpful @ alias which mapped to the root of your app. However, with larger pages and components, you’d have to do a lot of importing.

Let’s say we have a global header component that’s stored in the /components/global/AppHeader.vue directory. We’d have to import that component like:

<template>
    <div>
        <AppHeader/>
    </div>
</template>

<script>
    import AppHeader from '@/components/global/AppHeader.vue'

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

Not only would we have to provide an import statement, we’d also have to register the component in the components object in the parent component. This wasn’t too bad, but there are even less steps when using Nuxt 3.

Importing and Using Components in Nuxt 3

Let’s say we have the same component in Nuxt 3 stored in the /components/global/AppHeader.vue directory. To use that component, our process would look like:

<template>
    <div>
        <GlobalAppHeader/>
    </div>
</template>

There’s a lot less code in Nuxt 3 to get the same functionality! Specifically, there are 2 specific changes you will have to make when migrating to Nuxt 3.

First, you will notice the name of the component is not <AppHeader/>, but <GlobalAppHeader/>. When Nuxt 3 auto imports, each sub-directory transforms to a camel-cased prefix on the component name. So our directory being /global and our component file named AppHeader.vue would translate to <GlobalAppHeader/>.

Finally, you won’t even have to register the component within the layout, page, or parent component. Since the name of the component is essentially namespaced, there’s only one possibility for what component it is. Nuxt 3 takes care of the naming conventions and auto importing.

To be honest, the auto-importing naming conventions caught me off guard. However, I enjoy using them now that I’ve gotten the hang of it. I did have to rename a few components and restructure the directories so they’d make more sense. But once I did, I felt like I could really flow when building the app.

The main benefit is that you are pretty much guaranteed a two word component name. This is an essential style rule for Vue 3. You won’t even have to think about it like you would if you were just importing a component and had to come up with a name on the fly.

Conclusion

Overall, I find it much quicker to develop using auto-imported components with Nuxt 3. If you want to see how we migrated our components for ROAST, check out our book. We have a Nuxt 2 and Nuxt 3 branch that you can compare and contrast.

Of course, if you have any questions, feel free to reach out on our community or on Twitter (@danpastori).

Keep Reading
View the course View the Course Upgrading Nuxt 2 to Nuxt 3
Up Next → POST, PUT, and PATCH Requests with Nuxt 3

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or get sweet perks by becoming a sponsor.

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.

Like this? Subscribe

We’re privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.

What topics are you interested in?
Are you interested in our upcoming book?