Overview:
Nuxt Full Static is an experimental feature for Nuxt 3 that allows for the generation of static payloads at build time. This feature is capable of prerendering routes and can also work in hybrid mode, rendering payloads on the server. By using Nuxt Full Static, the useAsyncData and useFetch calls will be prefilled with static payloads, eliminating the need for these functions to run on the client-side. However, it is still possible to opt-out of this feature and manually call refresh to re-run the data fetching function.
Features:
- Generates static payloads at build time if routes are prerendered
- Works in hybrid mode, rendering payloads on the server
- Automatically prefills useAsyncData and useFetch calls with static payloads
Installation:
To use Nuxt Full Static, follow these steps:
- Clone this repository to your local machine.
- Enable Corepack using
corepack enable(install Corepack usingnpm i -g corepackfor Node.js versions below 16.10). - Install dependencies using
pnpm install. - Stub the module with
pnpm dev:prepare. - Run
pnpm devto start the playground in development mode.
Summary:
Nuxt Full Static is an experimental feature for Nuxt 3 that allows for the generation of static payloads at build time. It eliminates the need for certain functions to run on the client-side by automatically prefilling useAsyncData and useFetch calls with static payloads. This feature can also work in hybrid mode, rendering payloads on the server. The installation process involves cloning the repository, enabling Corepack, installing dependencies, and running the playground in development mode.