Learning Nuxt.js

1h 32mIntermediate2022-06-24

Authors

Gift Egwuenu

Developer Advocate and Instructor

Course details

Nuxt.js is a Vue framework for building blazing fast web applications. In this course, Gift Egwuenu covers the essential and core concepts in Nuxt.js from the ground up, teaching you how to set up a Nuxt project. Covered topics include: File-based routing and how it works, Nuxt Components, Nuxt plugins and modules, data fetching; and more topics you need to understand to build a fully functional web application.

Skills covered

NuxtJSVue.jsJavaScript FrameworksLearningWeb DevelopmentOpen Source

Concepts

0. Introduction

01 - Learn Nuxt for complete application development
02 - What you should know
03 - Exercise files

1. Getting Started

04 - What is Nuxt.js
05 - Scaffold an app with create-nuxt-app
06 - A look into .nuxt directory
07 - The concept of layout and pages
08 - Challenge - Create your first page
09 - Solution - Create your first page

2. Nuxt.js Core Concepts

10 - File system routing
11 - Dynamic routes
12 - Data fetching in Nuxt
13 - The fetch hook
14 - SEO and meta tags
15 - Challenge - Create an image gallery
16 - Solution - Create an image gallery

3. Extending Nuxt.js

17 - What are Nuxt plug-ins
18 - What are Nuxt Modules
19 - Challenge - Optimizing images using the Nuxt Image module
20 - Solution - Optimizing images using the Nuxt Image module

4. Build and Deployment Strategies

21 - Server-side rendering and static site generation
22 - How to deploy with Cloudflare Pages
23 - How to deploy with Vercel

Conclusion

24 - Next steps