⇨ Click here for the table of contents for Vue articles

I'm playing around with Nuxt3.

When it was Nuxt2, there were various directories and it seemed to automatically handle DynamicRouting, but in Nuxt3, it didn't work even with the following directory structure.

Dynamic routing is a feature where if you create a directory structure like:

pages/about/index.vue

it automatically creates routing without the need for routing files.

Environment
node --version v16.13.0
Nuxt3

Conclusion

Modify app.vue as follows

<template>
  <div>
    <NuxtPage/>
  </div>
</template>

Create layouts/default.vue

<template>
  <div>
    <header>
      <li>TOP</li>
      <li>ABOUT</li>
      <li>CONTACT</li>
    </header>
    <main>
      <!-- The layout of each page will go in this slot section -->
      <slot />
    </main>
  </div>
</template>

Create pages/about/index.vue

<template>
  <div>About</div>
</template>

When accessing http://localhost:3000/about, it displayed correctly.

You need to create the pages and layouts directories yourself as they are not initially provided.

I will attach an image of the directory structure.

After adding a page, you need to yarn dev

If you are doing everything correctly and the page is not displayed with dynamic routing, try restarting the local server

Stop the local server

Control + C

Start the local server

yarn dev

Summary

In this article, I covered the setup for dynamic routing in Nuxt3.

Personally, I prefer dynamic routing, but are there cases where it is easier to create separate routing files?

For more information, visit the official page

If you have complaints or corrections, please contact me via DM on Twitter below.

That's all!