@danielkelly_io

@danielkellyio

Alabama, USA

Daniel Kelly

Lead Instructor @ Vue School

Full Stack developer (10 years)

Husband and Father

presentation Icons from fontawesome.com

Leveling Up Nuxt

Nuxt 2 → Nuxt 3

Vue

Dynamic/Reactive Frontends

<template>
  <div>
    <h1>Nuxt is Awesome!</h1>
    <ul v-auto-animate>
      <li 
        v-for="reason in soManyReasons" 
        :key="reason">
        {{ reason }}
      </li>
    </ul>
  </div>
</template>

Templating

Vue

3 Vue

3

Increased Performance

~55% faster overall
updates up to 33% faster
memory usage ⬇ 54%

TypeScript Support

Improved DX
Zero-config
Less fragile apps

Composition API

Better logic reuse
Flexible code organization
Better type inference

Universal Rendering

Better Performance

No waiting for browser to

run JS app and render

Improved SEO

Web crawlers directly index

the page's content

Universal Rendering

Static Site Generation

Cheap, fast, secure hosting

on the Jamstack

Better Performance

No waiting for browser to

run JS app and render

Improved SEO

Web crawlers directly index

the page's content

Universal Rendering

Static Site Generation

Cheap, fast, secure hosting

on the Jamstack

New and Improved

💪

Runs Anywhere

Not just Node anymore.

Deno, workers, +

Built for Fast

Cold Starts

Great for serving from

Lambda or Edge Functions

Universal Rendering

Hybrid Rendering

Support multiple

rendering modes on a

single app

Hybrid Rendering

export default defineNuxtConfig({
  routeRules: {
    // Static page generated on-demand, revalidates in background
    '/blog/**': { swr: true },
    // Static page generated on-demand once
    '/articles/**': { static: true },
    // Set custom headers matching paths
    '/_nuxt/**': { headers: { 'cache-control': 's-maxage=0' } },
    // Render these routes with SPA
    '/admin/**': { ssr: false },
    // Add cors headers
    '/api/v1/**': { cors: true },
    // Add redirect headers
    '/old-page': { redirect: '/new-page' },
    '/old-page2': { redirect: { to: '/new-page', statusCode: 302 } }
  }
})

Hybrid Rendering

vueschool.io/articles/vuejs-tutorials/hybrid-rendering-in-nuxt-js-3/

Zero-Config Deploys

Or minimal config deploys

Tooling

Webpack

Bundling and

development server

with HMR

CLI

Start dev server, build for production, ssg

Tooling

Vite

Lightning fast

development server

with HMR

Nuxi CLI

Everything from Nuxt CLI

plus: file scaffolding, updates,

cleanup, and more!

Tooling

File Structure

Conventions

Predictable file structure

that's easy to navigate

Functionality Based

on Directory

Auto imported components,

file-based routing, etc

File Structure

Conventions

Predictable file structure

that's easy to navigate

Functionality Based

on Directory

Auto imported components,

file-based routing, etc

V3 Enhancments

Nuxt 3 adds conventions

and added functionality

routes created based on structure (including dynamic routes)

/pages

/pages/edit-[id].vue

/pages/_id.vue

Dynamic Params

/pages/[id].vue

Dynamic Params

/pages/_.vue

Catch All

/pages/[...slug].vue

Catch All

<NuxtLink to="/123">Post 123</NuxtLink>

routes created based on structure (including dynamic routes)

/pages

Page Meta

// MyPage.vue
definePageMeta({  
  middleware: ["auth"],
  pageTransition: 'fade',
  layout: 'blog',
})
useHead({
  title: "Hello World"
})

Page Meta

// MyPage.vue
export default {
  middleware: 'auth',
  transition: 'fade',
  layout: 'blog',
  head() {
    return {
      title: 'Hello World',
    }
  }
}

predictable location to store Vue Single File components

/components

Auto Imports


// it's automatic!

Auto Imports

// nuxt.config.js
export default {
  components: true
}

🔥 so are composables!

/composables

predictable location to store Vue Single File components

/components

Client Only

// MyPage.vue
<template>
  <ClientOnly>
    <MyComponent/>  
  </ClientOnly>
</template>

Client Only

// MyPage.vue
<template>
  <ClientOnly>
    <MyComponent/>  
  </ClientOnly>
</template>

predictable location to store Vue Single File components

/components

Client Only

// MyPage.vue
<template>
  <ClientOnly>
    <MyComponent/>  
  </ClientOnly>
</template>

Client Only

// MyPage.vue
<template>
    <MyComponent/>  
</template>

MyComponent.client.vue

MyComponent.server.vue

predictable location to store Vue Single File components

/components

MyComponent.client.vue

Client Only

// MyPage.vue
<template>
  <ClientOnly>
    <MyComponent/>  
  </ClientOnly>
</template>

Client Only

// MyPage.vue
<template>
    <MyComponent/>  
</template>

// MyComponent.server.vue
<template>
  Loading...
</template>

MyComponent.server.vue

MyComponent.client.vue

predictable location to store Vue Single File components

/components

MyComponent.client.vue

Client Only

// MyPage.vue
<template>
  <ClientOnly>
    <MyComponent/>  
  </ClientOnly>
</template>

Client Only

// MyPage.vue
<template>
    <MyComponent/>  
</template>

// MyComponent.client.vue
<script setup>
  $fetch("http://myapi.com")
</script>

MyComponent.client.vue

lazy load components by prefixing with "lazy"

/components

<LazyMountainsList v-if="show" />

useful if component is not always needed
delay loading component until the right moment
optimize bundle size

combine directory structure to assemble component name

/components

(Duplicate segments are removed)

 <BaseFooCustomButton />

extract common UI or code patterns into reusable layouts

/layouts

Render Page

// layouts/default.vue
<template>
  <div>
    <slot />
  </div>
</template>

Render Page

// layouts/default.vue
<template>
  <Nuxt />
</template>

⚠️ must provide wrapper!

extract common UI or code patterns into reusable layouts

/layouts

Render Page

// ~/error.vue
<template>
  <pre> {{error}} </pre>
</template>

<script setup>
defineProps({
  error: Object
})
</script>

Error Page

// layouts/error.vue
<template>
  <pre> {{error}} </pre>
</template>

<script>
export default {
  props: ['error'],
}
</script>

run code before navigating to a route

/middleware

anonymous middleware
named middleware
global middleware

run code before navigating to a route

/middleware

Global Middleware

// nuxt.config.js
export default{
  router: {
    middleware: 'log',
  },
}

~/middleware/log.js

Global Middleware

~/middleware/log.global.js

run code before navigating to a route

/middleware

Middleware Definition

// middleware/log.js
export default function (context) {
  console.log("hello")
}

Middleware Definition

// middleware/log.js
export default defineNuxtRouteMiddleware((to, from) => {
  console.log("hello")
})

run code before navigating to a route

/middleware

Middleware Definition

// middleware/log.js
export default function ({redirect}) {
  return redirect("/login")
}

Middleware Definition

// middleware/log.js
export default defineNuxtRouteMiddleware((to, from) => {
  return navigateTo('/login')
})