Learn Nuxt Icon

Learn Nuxt course outline

  • Introduction
    • Setting up your computer
    • Creating a new Nuxt project
    • Starting a Nuxt project from a template
    • nuxi command deep dive
    • Auto imports
    • Runtime Config and .env
  • Architecting your app
    • nuxt.config.ts
    • Rendering modes
    • Route-based rendering modes
    • Project structure
  • app.vue / component structures
    • Single page use-cases
    • A note on vue file structure
    • The Nuxt <script> tag and its forms
  • Project - your first Nuxt landing page
    • Setting up for a static landing page
    • Intro to modules - adding your first module
    • Building the hero section
    • Building the features section
    • Building a testimonials section
    • Building a contact section
    • Simple deployment with Vercel
  • Lifecycle of an app
    • Introduction
    • using onMounted for client-side work
  • Reactivity and data modelling
    • Reactive data
    • Looping data
    • Binding data to inputs
    • Interactive challenge - updating the contact form
    • Intro to composables - global state
    • 3rd party state library - Pinia
    • Watchers - watch and watchEffect
    • Props - data for components
    • Events - communicating data from components to parents
    • Slots - making components customizable
  • Requests to the server
    • A note on rendering modes and server availability
    • Creating server endpoints
    • Nuxt event handlers
    • Must know functions to use in event handlers
    • Creating server request contexts
    • Validating user supplied data with Zod
    • intro to useFetch, $fetch
    • Handling errors from the server
    • Project 1 update - sending contact form data with NodeMailer
  • Data fetching
    • useAsyncData, useLazyAsyncData composables
    • useFetch, useLazyFetch composables
    • Optimizing data fetching with picks and transforms
    • Handling the UI for lazy fetching and pending states
    • Handling fetching, async process errors
    • Triggering refetches
  • Middlewares in Nuxt
    • Writing Nuxt router middlewares
    • Using Nuxt router middlewares
    • Writing Nuxt server middlewares
    • Using server middlewares & best-practices
  • Project 2A - A basic CRUD app with fake auth
    • Getting started
    • Building the User entity on the server
    • Building the Post entity on the server
    • Adding the REST routes for create, read, update and deleting Posts
    • Adding a middleware with fake authentication
    • Testing the server endpoints
    • Fake login page
    • Post list page
    • Single Post page
    • Post add page
    • Post edit page
    • Nuxt client middleware to check auth
    • Updating server middleware to read request headers
  • Nuxt plugins
    • Introduction, structure and syntax
    • Using Vue components / libraries built by others
    • The <ClientOnly> component
    • Adding app-wide functionalith with 'provide'
    • Interactive example - a date formatter
  • A deeper look into composables
    • Writing and using composables
    • Building a Alert component with a composable
    • Interactive example - automatically hide the alert
  • Project 2B - Adding GitHub auth to our Posts app
    • Installing required dependencies
    • Encapsulating user logic in a composable
    • Building the sign in flow
    • Building the redirect endpoint
    • Updating middlewares to use tokens
    • Interactive example - middleware to redirect already authenticated users from login page
  • Data persistence
    • Introduction, why Sqlite?
    • Setting up Prisma
    • Adding Prisma schemas
    • Running migrations
    • Generating the client
    • Using the client, safely
    • Updating Project 2 Post and User entities
    • Notes on databases with Serverless
  • Project 3 - Simple chat application with Firebase
    • What is Firebase? Why are we using it?
    • Project setup - Nuxt
    • Project setup - Firebase
    • Building the chat interface
    • Using Firebase auth to identify users
    • Firestore query to fetch messages
    • Firestore query to write messages
    • Making the app real-time
    • A note on securing the app
    • How to deploy Nuxt to Firebase
  • Preparing your app for production
    • Self-hosted solutions with PM2
    • Optimizing for Firebase
    • Image optimizations
    • Font optimizations for CLS
    • Scripts and CSS
  • Advanced topic - Modules
    • Extending Nuxt apps vs. modules
    • Creating modules with nuxi
    • Defining options
    • Adding components
    • Hooking into the build
    • Adding plugins
    • Injecting composables
    • Generating types
    • Adding server routes
    • Adding files to Nitro bundle
    • Project 4 - Your first Nuxt module - Logger
  • And much more...