Migrating Layouts from Nuxt 2 to Nuxt 3

Part 1 of 8 in Upgrading Nuxt 2 to Nuxt 3
Dan Pastori avatar
Dan Pastori March 17th, 2022

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!

Keep Reading
View the course View the Course Upgrading Nuxt 2 to Nuxt 3
Up Next → Setting Page Titles in 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.

Gold Sponsor SnapShooter Backups

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?