How to Create Your First Page in Nuxt | Full-Stack Web Dev #2
2This 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 1
00:12 Adding Content to app.vue (Hello World)
00:42 Vue File Structure: Template, Script, and Style Basics
01:36 Creating a New Page (About Page)
01:55 Nuxt File-Based Routing Setup
02:25 Creating index.vue and about.vue
02:43 Cleaning app.vue & Route Announcer Explanation
03:12 Testing Routes: Index, About, and 404
03:35 Adding Content to About Page
03:57 Navigation with HTML Anchor Tags
04:42 Using NuxtLink for Navigation
05:19 NuxtLink Benefits (Prefetching & Optimizations)
05:59 Demo: Switching Pages with NuxtLink
06:20 Wrap-Up & Next Steps