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.

Matching moments

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Using content channels to build an event community
04:49 MIN

Using content channels to build an event community

Cat Herding with Lions and Tigers - Christian Heilmann

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

Automating video post-production with local scripts
02:54 MIN

Automating video post-production with local scripts

Cat Herding with Lions and Tigers - Christian Heilmann

Rapid-fire thoughts on the future of work
02:44 MIN

Rapid-fire thoughts on the future of work

What 2025 Taught Us: A Year-End Special with Hung Lee

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Breaking down silos between HR, tech, and business
03:39 MIN

Breaking down silos between HR, tech, and business

What 2025 Taught Us: A Year-End Special with Hung Lee

Featured Partners

Related Videos

See all videos
Modern Web Development with Nuxt341:43

Modern Web Development with Nuxt3

Alexander Lichter

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

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

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering

From learning to earning

Jobs that call for the skills explored in this talk.