Alexander Lichter

Nuxt.js - Just Vue 3 and a bit of magic?

What if your Vue app had a full-stack backend built right in? See how Nuxt 3's server engine makes it possible with typed APIs and universal deployment.

Nuxt.js - Just Vue 3 and a bit of magic?
#1about 2 minutes

Understanding the core features of Nuxt 3

Nuxt 3 is a versatile Vue-based framework that supports various rendering modes and universal deployment to platforms like Node.js, serverless, and the edge.

#2about 4 minutes

Setting up a project and creating file-based routes

Initialize a new Nuxt application and create pages using the file-based routing system within the `pages` directory, rendering them with the `<NuxtPage>` component.

#3about 7 minutes

Fetching data and creating dynamic page routes

Use the `useFetch` composable to retrieve data from an external API and create dynamic routes using bracket notation in filenames to display content based on URL parameters.

#4about 2 minutes

Creating type-safe server API routes with Nitro

Build backend API endpoints directly within your Nuxt project using the `server` directory and Nitro's `defineEventHandler`, which provides automatic type inference for frontend data fetching.

#5about 4 minutes

Connecting to persistent storage with Unstorage drivers

Integrate persistent data storage by configuring an Unstorage driver like Cloudflare KV in `nuxt.config.ts` and interacting with it using the `useStorage` composable in Nitro server routes.

#6about 5 minutes

Implementing a backend-for-frontend to cache API calls

Create server routes that act as a proxy to an external API, caching the results in persistent storage to build a resilient backend-for-frontend (BFF) pattern.

#7about 1 minute

Summary of Nuxt's benefits and advanced features

A review of Nuxt's powerful developer experience and a look at other advanced features like dev tools, layouts, modules, and state management that were not covered in the demo.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

Building Better with Nuxt 341:22

Building Better with Nuxt 3

Daniel Roe

Building for the Edge - Crafting a Next-Gen Framework43:41

Building for the Edge - Crafting a Next-Gen Framework

Daniel Roe

Fast & Furious - Going headless with Nuxt.js!42:21

Fast & Furious - Going headless with Nuxt.js!

Samuel Snopko

Modern Web Development with Nuxt341:43

Modern Web Development with Nuxt3

Alexander Lichter

WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more1:03:53

WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more

Chris Heilmann, Daniel Cranney & Alexander Lichter

petite-vue - Progressively enhancing every application?44:40

petite-vue - Progressively enhancing every application?

Alexander Lichter

Next, Nest, Nuxt… Nust?26:30

Next, Nest, Nuxt… Nust?

Marius Obert

To New Frontiers: The Future of Frontend Development26:00

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

From learning to earning

Jobs that call for the skills explored in this talk.