Creating Dynamic Pages with Nuxt Slugs | Full-Stack Web Dev #3
This is Episode #2 of my Nuxt Full-Stack Web Development series.
In this video, I’ll create the first actual page in our Nuxt project. We’ll look at how Nuxt handles page routing out of the box and how to navigate between pages using NuxtLink. By the end, you’ll understand how to set up multiple pages and connect them with clean, built-in navigation.
What’s covered in this video:
Creating new pages with Nuxt’s file-based routing
Navigating between pages using NuxtLink
Understanding how basic routing works in Nuxt projects
Subscribe to follow along with the full series as we continue building this project step by step.
00:00 Intro & Recap of Episode 2
00:18 File-Based Routing in Nuxt Explained
00:36 Creating Subdirectories for Routes (Profiles Example)
01:01 Adding Profile Pages (1.vue, 2.vue)
01:16 Navigating to Subdirectory Pages
01:27 Introducing Dynamic Routes (Slugs)
01:38 Creating [profileId].vue File
01:47 How Slug Files Work in Nuxt
02:00 Testing Dynamic Routes with Different IDs
02:05 Accessing Route Parameters with useRoute
02:23 Using Params Inside a Component
02:34 Displaying Slug Value with Vue Interpolation
02:43 Practical Use Cases for Dynamic Routes
02:56 Wrap-Up & Next Steps