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.

#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.

From learning to earning

Jobs that call for the skills explored in this talk.