Nuxt Full Static screenshot

Nuxt Full Static

Author Avatar Theme by Danielroe
Updated: 24 Sep 2024
121 Stars

Full static implementation for Nuxt 3

Categories

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:

  1. Clone this repository to your local machine.
  2. Enable Corepack using corepack enable (install Corepack using npm i -g corepack for Node.js versions below 16.10).
  3. Install dependencies using pnpm install.
  4. Stub the module with pnpm dev:prepare.
  5. Run pnpm dev to 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.