Migrating Layouts from Nuxt 2 to Nuxt 3

One of the first steps I did when migrating from Nuxt 2 to Nuxt 3 was to migrate my app’s layout. Since the layout was essentially the shell of my application, I figured this was a good place to start. Remember, we aren’t using Nuxt bridge and doing a straight Nuxt 2 to Nuxt 3 migration. Essentially upgrading our codebase so we can experience the full power of Nuxt 3. Let’s get started!

Step 1: Find your Nuxt 2 Layouts

If you have multiple layouts in your app, these will live in your /layouts directory. Some apps are just the app.vue layout and that’s alright too. No matter what, you will need to find your layouts. Once you’ve located them, we can move to the next step.

Step 2: Create a /layouts directory in Nuxt 3

If you are using multiple layouts, you will need to create a top level /layouts directory within your Nuxt 3 install. If you have one layout, you will need to look at your /app.vue single file layout. This will be the only layout within your app. After you’ve created your /layouts directory or found your /app.vue file, it’s time to update your existing Nuxt 2 layouts for Nuxt 3.

Step 3: Update Nuxt 2 layouts for Nuxt 3

This process requires making 1 small change. Granted, there are a lot of steps coming up in the process, this was where I started. In your Nuxt 2 layouts, find the <nuxt/> tag. Remove that tag and rename it to be <slot/>. This is all you have to do for now and the layout will be primed for Nuxt 3! For example, our ROAST layout looked similar to this in Nuxt 2:

<template>
    <div id="app-layout">
        <main>
            <nuxt />
        </main>
    </div>
</template>

And now looks like this in Nuxt 3:

<template>
    <div id="app-layout">
        <main>
            <slot />
        </main>
    </div>
</template>

Conclusion

This is good place to start, but we’ve got a lot of updates to make! If you’d like to see us work on the codebase live, we do have a book. The book is a cohesive approach to building the entire Nuxt 3 application. In the book we will take you from installation to deployment on web AND mobile (iOS and Android). It’s a step by step guide for building an API driven application with Laravel and using Nuxt 3. We even include the Nuxt 2 book as well! Feel free to reach out on Twitter if you have any questions or leave a comment in our community. We have a lot more coming soon!