@nuxt/docs-nightly 4.5.1-29744085.ef319e7f → 4.5.1-29746779.3590eee2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -64,6 +64,7 @@ When you set your `future.compatibilityVersion` to `5`, defaults throughout your
|
|
|
64
64
|
- **Non-async `callHook`**: [`callHook` may return `void`](/docs/4.x/getting-started/upgrade#non-async-callhook) instead of always returning a `Promise`
|
|
65
65
|
- **Comment node placeholders**: Client-only components use [comment nodes instead of `<div>`](/docs/4.x/getting-started/upgrade#client-only-comment-placeholders) as SSR placeholders, fixing a scoped styles hydration issue
|
|
66
66
|
- **Stricter side-effect imports**: The generated `tsconfig.json` enables [`noUncheckedSideEffectImports`](/docs/4.x/getting-started/upgrade#stricter-side-effect-imports) to match the TypeScript 7 default
|
|
67
|
+
- **Vue Options API disabled**: The [Options API is compiled out of the client bundle](/docs/4.x/getting-started/upgrade#vue-options-api-disabled-by-default) to reduce its size
|
|
67
68
|
- Other Nuxt 5 improvements and changes as they become available
|
|
68
69
|
|
|
69
70
|
::note
|
|
@@ -309,6 +310,34 @@ export default defineNuxtConfig({
|
|
|
309
310
|
```
|
|
310
311
|
::
|
|
311
312
|
|
|
313
|
+
### Vue Options API Disabled by Default
|
|
314
|
+
|
|
315
|
+
🚦 **Impact Level**: Minimal
|
|
316
|
+
|
|
317
|
+
#### What Changed
|
|
318
|
+
|
|
319
|
+
With `compatibilityVersion: 5`, Nuxt sets Vue's [`__VUE_OPTIONS_API__`](https://vuejs.org/api/compile-time-flags#VUE_OPTIONS_API) feature flag to `false`, which compiles Vue's Options API runtime out of the client bundle.
|
|
320
|
+
|
|
321
|
+
#### Reasons for Change
|
|
322
|
+
|
|
323
|
+
The Options API runtime ships in every client bundle even though most Nuxt applications are written with the Composition API and `<script setup>`. Dropping it shrinks the client bundle (around 6 kB minified / 2 kB gzipped on a minimal app).
|
|
324
|
+
|
|
325
|
+
#### Migration Steps
|
|
326
|
+
|
|
327
|
+
If any of your components (or a dependency's components) use the Options API (`export default { data() {}, methods: {}, ... }`), re-enable it in your `nuxt.config`:
|
|
328
|
+
|
|
329
|
+
```ts twoslash [nuxt.config.ts]
|
|
330
|
+
export default defineNuxtConfig({
|
|
331
|
+
vue: {
|
|
332
|
+
optionsApi: true,
|
|
333
|
+
},
|
|
334
|
+
})
|
|
335
|
+
```
|
|
336
|
+
|
|
337
|
+
::note
|
|
338
|
+
`defineNuxtComponent` is unaffected: its `asyncData` and `head` options are handled through `setup()` rather than the Vue Options API, so it works regardless of this flag.
|
|
339
|
+
::
|
|
340
|
+
|
|
312
341
|
## Migrating to Nuxt 4
|
|
313
342
|
|
|
314
343
|
Nuxt 4 includes significant improvements and changes. This guide will help you migrate your existing Nuxt 3 application to Nuxt 4.
|
|
@@ -43,7 +43,10 @@ When running [`nuxt build`](/docs/4.x/api/commands/build), the home page will be
|
|
|
43
43
|
## Notes
|
|
44
44
|
|
|
45
45
|
- A rule defined in `~/pages/foo/bar.vue` will be applied to `/foo/bar` requests.
|
|
46
|
-
- A rule in `~/pages/foo/[id].vue` will be applied to `/foo
|
|
46
|
+
- A rule in `~/pages/foo/[id].vue` will be applied to `/foo/*` requests.
|
|
47
|
+
- A rule in a page with a finite set of alternatives, such as a custom `path` of `/:locale(en|fr)/about`, will generate one rule per alternative (`/en/about` and `/fr/about`).
|
|
48
|
+
|
|
49
|
+
If a page path cannot be converted to an equivalent route rule pattern (for example, a param with a regular expression like `/:id(\d+)`, a partial segment like `/prefix-:id`, or a repeatable param like `/:slug+`), the rules for that page are **not** applied and Nuxt warns during build. In that case, define the rules explicitly in `nitro.routeRules` in your `nuxt.config`.
|
|
47
50
|
|
|
48
51
|
For more control, such as if you are using a custom `path` or `alias` set in the page's [`definePageMeta`](/docs/4.x/api/utils/define-page-meta), you should set `routeRules` directly within your `nuxt.config`.
|
|
49
52
|
|
package/4.api/6.nuxt-config.md
CHANGED
|
@@ -107,6 +107,28 @@ This can also be set at runtime by setting the NUXT_APP_BASE_URL environment var
|
|
|
107
107
|
NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjs
|
|
108
108
|
```
|
|
109
109
|
|
|
110
|
+
::note
|
|
111
|
+
Relative paths (like `./`) are not supported directly in `nuxt.config.ts` due to Nitro limitations. For static hosting with relative asset paths, use one of these approaches:
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
# Option 1: Environment variable at build time
|
|
115
|
+
NUXT_APP_BASE_URL=./ npm run generate
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
```ts
|
|
119
|
+
// Option 2: Nitro runtime config
|
|
120
|
+
export default defineNuxtConfig({
|
|
121
|
+
nitro: {
|
|
122
|
+
runtimeConfig: {
|
|
123
|
+
app: {
|
|
124
|
+
baseURL: './',
|
|
125
|
+
},
|
|
126
|
+
},
|
|
127
|
+
},
|
|
128
|
+
})
|
|
129
|
+
```
|
|
130
|
+
::
|
|
131
|
+
|
|
110
132
|
### `buildAssetsDir`
|
|
111
133
|
|
|
112
134
|
The folder name for the built site assets, relative to `baseURL` (or `cdnURL` if set). This is set at build time and should not be customized at runtime.
|