Importing and Using Components in Nuxt 3

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).