Nuxt ❤️ Vercel

This is a tiny demo to show off Nuxt’s route rules integration with Vercel.

Here are a few different pages to try:

• / - revalidated every 60 seconds, in the background
• /static - generated on demand and then cached permanently
• /prerendered - generated at build time and cached permanently
• /dynamic - always fresh

The only config required:

export default defineNuxtConfig({
  routeRules: {
    // all routes (by default) will be revalidated every 60 seconds, in the background
    '/**': { isr: 60 },
    // this page will be generated on demand and then cached permanently
    '/static': { isr: true },
    // this page is generated at build time and cached permanently
    '/prerendered': { prerender: true },
    // this page will be always fresh
    '/dynamic': { isr: false },
    // you can do lots more with route rules too!
    '/redirect': { redirect: '/static' },
    '/headers': { headers: { 'x-magic-of': 'nuxt and vercel' } },
    '/spa': { ssr: false },
  },
})

Setup

Enable corepack:

npx corepack enable

Make sure to install the dependencies:

pnpm install

Credits

This was based on nuxt-on-the-edge by @pi0 which itself was inspired by other projects.

Development

Start the development server on http://localhost:3000

pnpm dev

Production

The easiest way to deploy your app is to link the repo to your Vercel account. Alternatively, you can create a production build locally using pnpm build.

Checkout the deployment documentation for more information.