Build Web Apps with Nuxt.js 3: Master TypeScript & API [New]

Name: Build Web Apps with Nuxt.js 3: Master TypeScript & API [New]
Rating: 4.9 (639 reviews)

Build Web Apps with Nuxt.js: Integrate Composition API, Pinia, TypeScript, Server-Side APIs, and SEO on Vercel

Created byShahzad Khan, Munir Malik

Last updated 1/2026

English

English [Auto],

What you'll learn

Understand Nuxt.js 3 essentials, including environment setup, routing, layouts, and core concepts like middleware and plugins.
Gain proficiency in Vue 3, covering Composition API, data binding, lifecycle hooks, and dynamic rendering.
Learn to integrate and use TypeScript in Nuxt.js for type-safe development and generics.
Implement state management in Nuxt.js using Pinia, focusing on store setup, persistence, and encryption.

Course content

9 sections • 34 lectures • 6h 44m total length

1. Course Introduction, Learning Outcomes and Project Overview1:59
Explore the fundamentals and advanced concepts of Nuxt.js 3, from routing and server-side rendering to Vue.js integration, TypeScript, and Pennia, then build, deploy, and maintain a complete web app.
2. Installing Nuxt 3 and Creating Your First Project2:29
Set up a Next.js project by installing Node.js, installing dependencies with npm, creating a project folder, opening it in VSCode, and running npm run dev to view localhost.
3. Understanding Nuxt 3 Folder Structure and Core Files5:45
Learn how to organize a nuxt.js 3 project with a scalable folder structure, covering essentials like app.vue, nuxt config, and folders such as components, pages, plugins, middleware, assets, and store.

1. Pages and File-Based Routing System in Nuxt 39:45
Dive into static and dynamic routing with pages, explore file-based routing and folder-based routing, and learn to run the dev server, render pages, and navigate using routing links.
2. Layouts: Creating and Managing Application Layouts6:49
Learn to implement default and custom layouts in Nuxt.js 3 by creating layout files and wrapping pages with slots. Tailor layouts for specific pages, override defaults, and dynamically update layouts.
3. Components in Nuxt 3 – Reusability and Best Practices22:36
Understand components as reusable UI containers and implement notes cards across pages, using auto import, folder organization, and dynamic client/server side imports.
4. Middleware in Nuxt 3 – Types, Use Cases and Examples14:49
Explore how middlewares run before rendering in nuxt.js, including global, named, and in-page types, and how next config hooks apply them to routes.
5. Composables – Reusing Logic with Nuxt 3 Composables10:18
Learn to create and use composables as reusable logic containers in a Nuxt.js 3 project, enable auto import, and build a copy-to-clipboard function for URLs.
6. Plugins – Extending Nuxt Functionality Properly8:39
Create and use custom Nuxt plugins to share functions globally and integrate third-party packages for UI behavior. Export define Nuxt plugin, provide values, and observe results with use Nuxt app.
7. Server API – Creating Backend APIs Inside Nuxt 34:06
Explore the server folder in a Nuxt.js 3 project, create a simple TypeScript API endpoint using define event handler, and fetch it from the front end to see hello output.

1. Composition API vs Options API – When and Why to Use Each10:57
Compare the composition API and option API in Nuxt.js 3, covering syntax, reusability, TypeScript support, readability, reactivity, lifecycle hooks, and practical code examples.
2. Data Binding and Vue Directives Explained with Examples17:27
explore data binding and directives in Nuxt.js 3, demonstrating interpolation, v-bind, v-model, and conditional classes, plus custom and global directives to connect data with the dom.
3. Methods and Computed Properties – Core Reactivity Concepts13:11
Explore methods and computed properties in a Nuxt.js 3 app, showing how methods update state with a push button and how computed properties derive read-only values, plus get/set for writability.
4. Conditional Rendering and List Rendering in Vue 316:15
Explore conditional rendering and list rendering in Nuxt.js 3, learning how to toggle elements with v-if and v-show and render lists with v-for, including keys, indices, and object key-value displays.
5. Vue 3 Lifecycle Hooks and Their Practical Use Cases15:36
Explore the Nuxt.js 3 lifecycle and hooks, learning on before mount, mounted, updated, and unmounted events, plus watchers, deep arrays, and watcher once in practical banner examples.

1. Props and Custom Events – Component Communication8:18
Learn props and custom events in a component based architecture, showing how parents pass data down to children and how children emit events up to the parent.
2. Slots and Scoped Slots – Flexible Component Design12:15
Learn how slots enable flexible, reusable components by letting a parent inject content into a child, explore default, named, and multiple slots, and master scoped slots with slot props.
3. Teleport Component – Rendering Outside the DOM Tree7:24
Learn how the teleport component moves a UI element from the main div into the body, creating a global, accessible module. See a quick example with a show model button.
4. Transitions and Animations in Vue and Nuxt Applications5:32
Explore how the transition component animates elements on mount and destroy, using enter and leave classes and named transitions like fade to create smooth on/off effects.

1. Why TypeScript with Nuxt 3 and How It Works7:24
Explore the basics of TypeScript in Nuxt, focusing on static typing, tsconfig.json configuration, and using interfaces and types to reduce errors in a Nuxt project.
2. Core TypeScript Concepts Used in Nuxt Projects13:06
Explore basic and advanced TypeScript concepts with examples of string, number, boolean, arrays, tuples, enums, any, and unknown. Learn to define interfaces, props, and intersections to combine types.
3. Working with Generics for Reusable and Type-Safe Code9:14
Learn how TypeScript generics provide type safety and flexibility across functions, classes, and interfaces, with practical examples of identity functions, HTML inputs, and API responses.

1. Introduction to State Management and Setting up Pinia10:20
Master state management in nuxt.js 3 apps by building a Pinia store, defining state, getters, and actions to centralize data and share updates across components.
2. Advanced Pinia Usage and Persisting Store Data9:52
Learn to access the Pinia store's state, getters, and actions, and persist values across page refreshes using the Pinia persist plugin with local storage or cookies.
3. Securing Application Data Using Pinia Store Encryption6:29
Learn how to secure Pinia store data by encrypting persisted values with a custom encryption secret, replacing get and set to protect login data in local storage.

1. Building the Project – Part 117:06
Build a Nuxt.js 3 project by creating a navbar and to-do list components, wiring routes with links, and styling with CSS during development.
2. Building the Project – Part 216:20
Create and route to-do pages in a Nuxt.js 3 project. Build a list with detail views, an edit form, and styled action buttons.
3. Building the Project – Part 329:27
Master the to-do app workflow in nuxt.js 3 by building a persistent store with to-dos, actions, getters, and marking tasks as completed, wiring pages for list, detail, and edit.
4. Building the Project – Part 424:59
Implement add and edit to-dos using props, forms, and v-model in a Nuxt.js 3 project, persisting data to local storage.

1. Deploying a Nuxt 3 Application on Vercel Step-by-Step9:02
Learn to optimize and build Nuxt.js projects, then deploy to Vercel, configure templates, logs, analytics, and seo-driven performance insights, with live deployment and persistent state across refreshes.
2. SEO Optimization, Meta Tags and Performance Best Practices8:31
Learn to implement SEO and meta tags in a Nuxt.js 3 project by configuring default SEO and per-page titles, descriptions, and keywords using use head and SEO meter.

1. Implementing Page Transitions in Nuxt 38:02
Practice shows how committing changes deploys to Vercel and updates title, tags, and description, then guides implementing global and page-specific transitions in Nuxt 3 using CSS classes and meta.
2. Handling Errors and Creating Custom Error Pages in Nuxt 36:42
Learn to build a custom error page in Nuxt.js 3, show 404 not found information, and include a button to return to the home page using TypeScript.
3. Building a Todo Application Using Nuxt 3 Server API33:42
Convert the todo functions into a server API in Nuxt 3, using H3 define event handler and read body to perform CRUD operations via the store.

Requirements

Familiarity with HTML, CSS, and JavaScript is essential to understand the core concepts of the course.
While not mandatory, having a basic understanding of Vue.js (especially Vue 2 or Vue 3 concepts) will be beneficial.
Comfort with using the command line for project setup and running development servers.
A code editor like Visual Studio Code (VSCode) is recommended for coding and managing the project files.
Basic knowledge of Node.js and npm (Node Package Manager) is needed for setting up and managing the development environment.

Description

In this course, you'll learn how to build modern, high-performance web applications using Nuxt.js, one of the most popular frameworks for Vue.js. Starting with the fundamentals, you'll dive deep into Nuxt's powerful Composition API, enabling you to write cleaner and more maintainable code.

Explore how to effectively manage state with Pinia, the modern state management library, and harness the power of TypeScript to build robust, type-safe applications. The course covers integrating server-side APIs, allowing you to create dynamic and data-driven apps that provide real-time user experiences.

You'll also learn about the best practices for SEO optimization, ensuring your web apps rank higher on search engines and are easily discoverable. Additionally, discover how to leverage Nuxt.js features like static site generation and server-side rendering for optimal performance. Finally, we’ll explore how to deploy your projects seamlessly with Vercel, a platform designed for hosting static websites and serverless functions with lightning-fast performance.

Throughout the course, you will work on hands-on projects to solidify your knowledge and build real-world web applications. Whether you're a beginner or looking to upgrade your web development skills, this course will provide you with the tools, frameworks, and knowledge needed to create cutting-edge, production-ready web apps using Nuxt.js, Composition API, Pinia, TypeScript, and more.

Who this course is for:

who are familiar with HTML, CSS, and JavaScript and want to dive into full-stack development with Nuxt.js and Vue.js.
eager to enhance their knowledge of advanced Vue.js concepts and leverage Nuxt.js for building scalable, production-ready applications.
who want to learn about state management with Pinia, work with TypeScript, and create powerful web apps using the latest tools.
who wants to understand its ecosystem, from routing and middleware to plugins, and build robust, maintainable projects.

Build Web Apps with Nuxt.js 3: Master TypeScript & API [New]

What you'll learn

Explore related topics

Course content

Module 1: Nuxt 3 Setup and Project Fundamentals3 lectures • 10min

Module 2: Nuxt 3 Core Architecture and Features7 lectures • 1hr 17min

Module 3: Vue 3 Reactive Fundamentals for Nuxt5 lectures • 1hr 13min

Module 4: Advanced Vue 3 Component Patterns4 lectures • 33min

Module 5: TypeScript Integration in Nuxt 33 lectures • 30min

Module 6: State Management & Data Security with Pinia3 lectures • 27min

Module 7: Full-Scale Nuxt 3 Project Development4 lectures • 1hr 28min

Module 8: Production Deployment and SEO Optimization2 lectures • 18min

Module 9: Page Transitions, Error Handling and Server APIs3 lectures • 48min

Requirements

Description

Who this course is for: