A Beginner’s Guide To Nuxt 3

Beginner

83 Lessons

19h

Certificate of Completion

AI-POWERED

Explanations

This course includes

1 Project

103 Playgrounds

8 Quizzes

52 Illustrations

This course includes

1 Project

103 Playgrounds

8 Quizzes

52 Illustrations

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

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

How You'll Learn

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Videos are holding you back. Educative‘s interactive, text-based lessons accelerate learning — no setup, downloads, or alt-tabbing required.

Learn faster and smarter with adaptive AI tools embedded in every Educative course.

Built-in assessments let you test your skills. Completion certificates let you show them off.

Recommended Courses

BEFORE STARTING THIS COURSE

AFTER FINISHING THIS COURSE

FOR TEAMS

Interested in this course for your business or team?

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