A Beginner’s Guide To Nuxt 3

Beginner

83 Lessons

19h

Certificate of Completion

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

1 Project

103 Playgrounds

8 Quizzes

This course includes

1 Project

103 Playgrounds

8 Quizzes

Course Overview

Vue.js is an amazing, user-friendly JavaScript framework for building user interfaces. Nuxt takes things further by providing a complete web development framework for modern applications based on Vue.js. This framework is easy to learn and provides many powerful and convenient features. You will learn about file-based routing, auto-importing, configuring Nuxt apps, rendering modes, SEO, fetching external data, and more. You will also get introduced to the Nitro server and API routes. All lessons will be b...Show More

What You'll Learn

Understanding of the fundamentals of Nuxt 3 framework for building Vue.js applications

Ability to understand the standard project structure of a Nuxt 3 application

Proficiency in setting up dynamic routes to create more flexible and dynamic page rendering

Working knowledge of the benefits of using NuxtLink for internal navigation

Ability to apply prefetching techniques to optimize user experience and load times

Understanding and utilizing the Composition API for cleaner and more maintainable code

Working knowledge of Nitro server and how it can be used to create our API

Knowledge of various testing approaches and tools available for Nuxt 3 applications

What You'll Learn

Understanding of the fundamentals of Nuxt 3 framework for building Vue.js applications

Course Content

About the Course

Course Overview

What is Nuxt?

Get Started with Nuxt

Nuxt Project Structure Pages and Components Props and Emitting Events Layouts Nuxt Auto-Import and Modules Overview Quiz: Get Started with Nuxt Coding Challenge: Nuxt Layouts, Pages, and Components Solution Review: Nuxt Layouts, Pages, and Components.

Routing

File-Based Navigation and Dynamic Routes NuxtLink and Prefetching Accessing Router Information Route Middleware Quiz: Routing Coding Challenge: Routing Using Nuxt Solution Review: Routing Using Nuxt

Composition API

Options and Composition API Script Setup and Reactivity Adding Reactivity Using Ref Computed Properties and Watchers Lifecycle Hooks Composable Files Quiz: Composition API Coding Challenge: Convert Options to Composition Solution Review: Convert Options to Composition

Handling Data

Fetching Data User Input and Query String Updates Data Fetching: Async and Lazy Composables Data Fetching: Pending and Re-Fetch Sharing State with useState Quiz: Handling Data Coding Challenge: Create a Dog Photo Catalogue Solution Review: Create a Dog Photo Catalogue

Pushing On with Our Project

16 Lessons

Meta Data, Config, and SEO

8 Lessons

Error Handling

5 Lessons

Server API

17 Lessons

Implement Product Updates

Project

Conclusion

1 Lesson

Appendix

2 Lessons

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Looking for something else?

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath