Nuxt Full Static (experimental)

Full static implementation for Nuxt 3

• ✨  Changelog
• ▶️  Online playground

Features

⚠️ nuxt-full-static is a proof of concept. ⚠️

👉 Roadmap and progress for nuxt 3 payload extraction support: nuxt/framework#6411

• Generates static payloads at build time if routes are prerendered
• Also works in hybrid mode, rendering payloads on the server

Usage

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-full-static'],
})

Automatically, all your useAsyncData and useFetch calls will be prefilled with static payloads. As long as you haven't set initialCache or server to false, you should not see these functions running on client-side at all. You can even stub them out by prefixing them with process.server &&:

const { data } = useAsyncData(() => process.server && $fetch('https://my.api.com/data'))

However, you also retain the ability to opt-out, by manually calling refresh. This will result in running the data fetching function again.

💻 Development

• Clone this repository
• Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
• Install dependencies using pnpm install
• Stub module with pnpm dev:prepare
• Run pnpm dev to start playground in development mode

License

Made with ❤️

Published under the MIT License.