https://github.com/danielroe/nuxt-full-static
Full static implementation for Nuxt 3
https://github.com/danielroe/nuxt-full-static
Last synced: over 1 year ago
JSON representation
Full static implementation for Nuxt 3
- Host: GitHub
- URL: https://github.com/danielroe/nuxt-full-static
- Owner: danielroe
- License: mit
- Archived: true
- Created: 2022-08-06T23:48:25.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-24T10:35:45.000Z (almost 2 years ago)
- Last Synced: 2024-10-29T09:29:14.660Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 504 KB
- Stars: 123
- Watchers: 3
- Forks: 4
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
> [!IMPORTANT]
> This implementation is now built-in to Nuxt 3+ and this module is no longer required.
# Nuxt Full Static (experimental)
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions][github-actions-src]][github-actions-href]
[![Codecov][codecov-src]][codecov-href]
> Full static implementation for [Nuxt 3](https://v3.nuxtjs.org)
- [✨ Changelog](https://github.com/danielroe/nuxt-full-static/blob/main/CHANGELOG.md)
- [▶️ Online playground](https://stackblitz.com/github/danielroe/nuxt-full-static/tree/main/playground)
## Features
**⚠️ `nuxt-full-static` is a proof of concept. ⚠️**
👉 Roadmap and progress for nuxt 3 payload extraction support: [nuxt/framework#6411](https://github.com/nuxt/framework/issues/6411)
- Generates static payloads at build time if routes are prerendered
- Also works in hybrid mode, rendering payloads on the server
## Usage
```js
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 &&`:
```js
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](https://github.com/nodejs/corepack) using `corepack enable`
- Install dependencies using `pnpm install`
- Stub module with `pnpm dev:prepare`
- Run `pnpm dev` to start [playground](./playground) in development mode
## License
Made with ❤️
Published under the [MIT License](./LICENCE).
[npm-version-src]: https://img.shields.io/npm/v/nuxt-full-static?style=flat-square
[npm-version-href]: https://npmjs.com/package/nuxt-full-static
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-full-static?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/nuxt-full-static
[github-actions-src]: https://img.shields.io/github/workflow/status/danielroe/nuxt-full-static/ci/main?style=flat-square
[github-actions-href]: https://github.com/danielroe/nuxt-full-static/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/gh/danielroe/nuxt-full-static/main?style=flat-square
[codecov-href]: https://codecov.io/gh/danielroe/nuxt-full-static