You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Crazy fast static applications](#crazy-fast-static-applications)
29
-
-[Crawler integrated](#crawler-integrated)
30
-
-[Faster re-deploy](#faster-re-deploy)
31
-
-[Smarter `nuxt start`](#smarter-nuxt-start)
32
-
-[Preview mode](#preview-mode)
33
-
-[Commands](#commands)
34
-
-[What to do next](#what-to-do-next)
35
-
36
-
## History
37
-
38
-
Nuxt had the static generation feature with `nuxt generate` since [v0.3.2](https://github.com/nuxt/nuxt.js/releases/tag/v0.3.2) (November 2016), since then we have improved it in multiple ways but never achieved full static generation. Today I am excited to announce that full static export is now possible with Nuxt 2.13.
39
-
40
-
## Current issues
41
-
42
-
`nuxt generate` is mostly pre-rendering, when you navigate client-side, `asyncData` and `fetch` are called, _making a request to your API_. A lot of users asked to support a "full static" mode, meaning to not call these 2 hooks on navigation, since the next page has been already pre-rendered.
43
-
44
-
Also, the developer experience is not optimal:
45
-
46
-
- You have access to `req` or `res` on SSR but not when running `nuxt generate`
47
-
-`process.static` is `true` only when running `nuxt generate`, making it slow to develop Nuxt modules or plugins for static generation
48
-
- You have to specify all your [dynamic routes](/docs/features/file-system-routing#dynamic-routes) in `generate.routes`, making it harder since you don't have access to nuxt modules there.
49
-
- You cannot test the [SPA fallback](/docs/concepts/static-site-generation#spa-fallback) in development, the fallback is a client-only version of your Nuxt application that loads when hitting a 404 page
50
-
-`nuxt generate` runs `nuxt build` by default, making it slower to generate your website if only your content changed
51
-
52
-
Note that it was possible to have full static support with [nuxt-payload-extractor](https://github.com/DreaMinder/nuxt-payload-extractor) module but it was more verbose to use and had limitations.
53
-
54
-
## New config option: `target`
55
-
56
-
To improve the user experience as well as telling Nuxt that you want to export your application to static hosting, we are introducing a `target` option in your `nuxt.config.js`:
57
-
58
-
```js{}[nuxt.config.js]
59
-
export default {
60
-
target: 'static' // default is 'server'
61
-
}
62
-
```
63
-
64
-
Full static doesn't work with `ssr: 'false'` (which is the same as the deprecated `mode: 'spa'`) as this is used for client-side rendering only (Single Page Applications).
65
-
66
-
Running `nuxt dev` with the static target will improve the developer experience:
67
-
68
-
- Remove `req` & `res` from context
69
-
- Fallback to client-side rendering on 404, errors and redirects (see [SPA fallback](/docs/concepts/static-site-generation#spa-fallback))
70
-
-`$route.query` will always be equal to `{}` on server-side rendering
71
-
-`process.static` is `true`
72
-
73
-
We are also exposing `process.target` for modules author to add logic depending on the user target.
74
-
75
-
## Smarter `nuxt generate`
76
-
77
-
Now with `v2.14.0`, you can use `nuxt generate`, it will smartly know if it has to build or not.
78
-
79
-
### Crazy fast static applications
80
-
81
-
`nuxt generate` with `target: 'static'` will pre-render all your pages to HTML and save a payload file in order to mock `asyncData` and `fetch` on client-side navigation, this means **no****more HTTP calls to your API on client-side navigation.** By extracting the page payload to a js file, **it also reduces the HTML size** served as well as preloading it (from the <link> in the header) for optimal performance.
82
-
83
-
We also improved the [smart prefetching](/announcements/introducing-smart-prefetching) when doing full static, it will also fetch the payloads, making navigation instant 👀
84
-
85
-
### Crawler integrated
86
-
87
-
On top of that, it also has a crawler inside, detecting every relative link and generating it:
88
-
89
-
If you want to exclude a bunch of routes, use the [generate.exclude](/docs/configuration-glossary/configuration-generate#exclude). You can keep using [generate.routes](/docs/configuration-glossary/configuration-generate#routes) to add extra routes that the crawler could not detect.
90
-
91
-
To disable the crawler, set `generate.crawler: false` in your `nuxt.config.js`
92
-
93
-
### Faster re-deploy
94
-
95
-
By separating `nuxt build` and `nuxt export`, we are opening a new range of improvements: pre-render your pages only if you content has changed, this means: no webpack build → faster re-deployments.
96
-
97
-
## Smarter `nuxt start`
98
-
99
-
Once you statically generated your Nuxt app into `dist/`, use `nuxt start` to start a production HTTP server and serve your static app, supporting [SPA Fallback](/docs/concepts/static-site-generation#spa-fallback).
100
-
101
-
This command is perfect to locally test your static application before pushing to your favorite static hosting provider.
102
-
103
-
## Preview mode
104
-
105
-
We do support live preview out of the box to keep calling your API:
106
-
107
-
```js{}[plugins/preview.client.js]
108
-
export default async function ({ query, enablePreview }) {
109
-
if (query.preview) {
110
-
enablePreview()
111
-
}
112
-
}
113
-
```
114
-
115
-
It will automatically refresh the page data (calling `nuxtServerInit`, `asyncData` and `fetch`).
116
-
117
-
When the preview mode is activated, `asyncData` and `fetch` original methods will be called.
118
-
119
-
## Commands
120
-
121
-
Depending of the `target`, you can run these commands.
122
-
123
-
-`server`
124
-
-`nuxt dev`: Start the development server
125
-
-`nuxt build`: Bundle your Nuxt application for production
126
-
-`nuxt start`: Start the production server
127
-
-`static`
128
-
-`nuxt dev`: Start the development server (static aware)
129
-
-`nuxt generate`: Bundle your Nuxt application for production if needed (static aware) and export your application to static HTML in `dist/` directory
130
-
-`nuxt start`: Serve your production application from `dist/`
131
-
132
-
### What to do next
133
-
134
-
To learn more about how to move from @nuxtjs/dotenv to runtime config check out [this article](/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config).
135
-
136
-
[Subscribe to the newsletter](#subscribe-to-newsletter) to not miss the upcoming articles and resources.
15
+
You can configure all the theme tokens to change the apperance of Alpine.
-[⚡️ Play on StackBlitz](https://stackblitz.com/github/nuxt-themes/docus-starter)
13
15
14
16
## Features
15
17
16
-
- Write pages in Markdown and Vue components
17
-
- Blog section
18
-
- etc. (TODO)
18
+
- Start from a **profile page**, scale to a **complete blog**!
19
+
- An [open source blog theme](https://github.com/nuxt-themes/alpine) powered by [Nuxt Content](https://content.nuxtjs.org), editable from [Nuxt Studio](https://studio.nuxt.com).
20
+
- Write pages in Markdown and Vue components with the [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc).
21
+
- Use [**30+ built-in**](https://elements.nuxt.space) components in your Markdown pages.
19
22
20
23
## Quick Start
21
24
22
25
```bash
23
26
npx nuxi init my-blog --theme alpine
24
27
```
25
28
26
-
## Contributing
29
+
## Contributing 🙏
27
30
28
-
TODO
31
+
1. Clone this repository
32
+
2. Install dependencies using `yarn install` or `npm install`
33
+
3. Run `npm run prepare` to generate type stubs.
34
+
4. Use `npm run dev` to start [playground](./playground) in development mode.
0 commit comments