More Premium Hugo Themes Premium Vue Themes

Nuxt Full Static

Full static implementation for Nuxt 3

Nuxt Full Static

Full static implementation for Nuxt 3

Author Avatar Theme by danielroe
Github Stars Github Stars: 121
Last Commit Last Commit: Sep 24, 2024 -
First Commit Created: Dec 18, 2023 -
Nuxt Full Static screenshot

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.