Log In
0% completed
All Lessons
Free Lessons (5)
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
Pagination
Safe Search
Creating and Displaying Tags
Filtering by Tag
Selecting Images Per Page
Displaying Color Filters and Binding Dynamic Styles
Setting a Featured Header Image
Creating the Modal Component
The Single Page and Route Middleware
Teleport
Downloading Images
Adding Nuxt Image to Our Project
Transitions
Quiz: Pushing On With Our Project
Coding Challenge: Using the Nuxt Image Component
Solution Review: Using the Nuxt Image Component
Meta Data, Config, and SEO
Configuration and Environment Variables
Head Metadata
Nuxt Built-In Components
Dynamic Title Templates and Additional Components
Untitled Masterpiece
Quiz: Meta Data, Config, and SEO
Coding Challenge: Set Dynamic Page Titles
Solution Review: Set Dynamic Page Titles
Error Handling
Rendering Errors in Our App
Error Helper Methods
Quiz: Error Handling
Coding Challenge: Throw and Clear Errors
Solution Review: Throw and Clear Errors
Server API
About the Nitro Server API
HTTP Methods
File Based API Routes
Route Parameters
Query Parameters
Fetching Data with useFetch and Matching HTTP Methods
Storing and Posting Data
Creating New Posts
The Admin Section
Updating Data
Deleting Data
The Single Post Page
Server Middleware
Fallback Routes
Quiz: Server API
Coding Challenge: Requesting Random Images from the Server
Solution: Requesting Random Images from the Server
Mini Project
Implement Product Updates
Conclusion
Course Summary
Appendix
Installing Nuxt Locally
Installing Nuxt Image
A Beginner’s Guide To Nuxt 3
/
...
/
Solution Review: Routing Using Nuxt
Solution Review: Routing Using Nuxt
Create a project using the Nuxt router.
We'll cover the following...
Solution
Explanation
The layouts/default.vue file
The pages/index.vue file
The pages/[id].vue file
Solution
...