Modern Web Development with Nuxt3

Stop wrestling with configuration. Nuxt 3 offers file-system routing, auto-imports, and sensible defaults to streamline your development workflow.

#1about 2 minutes

Understanding the Nuxt 2 foundation and its benefits

Nuxt 2 is a Vue framework that simplifies development by including batteries like Vue Router, Webpack, and Babel out of the box.

#2about 4 minutes

The motivation behind Nuxt 3 and the UnJS ecosystem

Nuxt 3 was developed to integrate major updates like Vue 3 and Vite, improve deployment on serverless platforms, and refactor the core into decoupled UnJS packages.

#3about 6 minutes

Exploring the batteries-included approach in Nuxt 3

Nuxt 3 provides a flexible folder structure and automatic file-system based routing, which converts your page components into a Vue Router configuration.

#4about 3 minutes

Built-in performance optimizations in Nuxt 3

Nuxt 3 enhances performance with automatic code splitting, cache busting via content hashing, a modern build mode, and smart prefetching for faster navigation.

#5about 6 minutes

Understanding versatile rendering modes like SPA, SSR, and SSG

Nuxt supports various rendering strategies, including Single-Page Applications (SPA), dynamic Server-Side Rendering (SSR), and Static Site Generation (SSG) for different use cases.

#6about 2 minutes

Extending functionality with the Nuxt module ecosystem

The modular architecture allows developers to easily integrate third-party libraries, hook into the framework's build process, and share reusable solutions with the community.

#7about 3 minutes

Enhancing the developer experience with modern tooling

Nuxt 3 improves developer experience with features like a new CLI, auto-imports for components and composables, and first-class TypeScript support for better autocompletion.

#8about 6 minutes

Live coding: Initializing an app and creating pages

A live demonstration shows how to initialize a new Nuxt 3 project with the CLI and create pages using the file-system based routing convention.

#9about 8 minutes

Live coding: Fetching data and demonstrating SSR

The demonstration continues by using the `useFetch` composable to fetch data from an API and shows how server-side rendering works by default.

#10about 2 minutes

Q&A: Using Vite for production builds

The speaker answers a question about whether Vite is used for production builds in Nuxt 3, confirming it can be configured for both development and production.