Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-18 01:15:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: update links to new vuejs.org site (#3091)

Browse Source
This commit is contained in:
Daniel Roe 2022-02-07 10:16:45 +00:00 committed by GitHub
parent b48bad0aaf
commit 8fbdab8151
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/content/2.concepts/1.introduction.md
View File

@ -10,8 +10,8 @@ To understand what is Nuxt, we need to understand what we need to create a moder
- A JavaScript framework to bring reactivity and web components, we chose [Vue.js](https://v3.vuejs.org). - A JavaScript framework to bring reactivity and web components, we chose [Vue.js](https://v3.vuejs.org).
- A bundler to support hot module replacement in development and bundle your code for production, we support both [Webpack 5](https://webpack.js.org/) and [Vite](https://vitejs.dev/). - A bundler to support hot module replacement in development and bundle your code for production, we support both [Webpack 5](https://webpack.js.org/) and [Vite](https://vitejs.dev/).
- A transpiler in order to write the latest JavaScript syntax while supporting legacy browsers, we use [esbuild](https://esbuild.github.io) for that. - A transpiler in order to write the latest JavaScript syntax while supporting legacy browsers, we use [esbuild](https://esbuild.github.io) for that.
- A server for serving your application in development, but also to support [server-side rendering](https://v3.vuejs.org/guide/ssr/introduction.html#what-is-server-side-rendering-ssr) or API routes, Nuxt uses [h3](https://github.com/unjs/h3) for deployment versatility such as serverless, workers, Node.js and unmatched performance. - A server for serving your application in development, but also to support [server-side rendering](https://vuejs.org/api/ssr.html#server-side-rendering-api) or API routes, Nuxt uses [h3](https://github.com/unjs/h3) for deployment versatility such as serverless, workers, Node.js and unmatched performance.
- A routing library to handle client-side navigation, we chose [vue-router](https://next.router.vuejs.org). - A routing library to handle client-side navigation, we chose [vue-router](https://router.vuejs.org/).
:: ::
This is only the tip of the iceberg, imagine having to set up all of this for your project, make it work, and then, maintain it over time. We have been doing this since October 2016, tuning all the configurations to provide the best optimization and performance for any Vue application. This is only the tip of the iceberg, imagine having to set up all of this for your project, make it work, and then, maintain it over time. We have been doing this since October 2016, tuning all the configurations to provide the best optimization and performance for any Vue application.

2
docs/content/3.docs/1.usage/1.data-fetching.md
View File

@ -189,7 +189,7 @@ const { data: mountain } = await useFetch('/api/mountains/everest', { pick: ['ti
If you are using `async setup()`, the current component instance will be lost after the first `await`. (This is a Vue 3 limitation.) If you want to use multiple async operations, such as multiple calls to `useFetch`, you will need to use `<script setup>` or await them together at the end of setup. If you are using `async setup()`, the current component instance will be lost after the first `await`. (This is a Vue 3 limitation.) If you want to use multiple async operations, such as multiple calls to `useFetch`, you will need to use `<script setup>` or await them together at the end of setup.
::alert{icon=👉} ::alert{icon=👉}
Using `<script setup>` is recommended, as it removes the limitation of using top-level await. [Read more](https://v3.vuejs.org/api/sfc-script-setup.html#top-level-await) Using `<script setup>` is recommended, as it removes the limitation of using top-level await. [Read more](https://vuejs.org/api/sfc-script-setup.html#top-level-await)
:: ::
```vue ```vue

4
docs/content/3.docs/1.usage/2.state.md
View File

@ -2,7 +2,7 @@
Nuxt provides `useState` composable to create a reactive and SSR-friendly shared state across components. Nuxt provides `useState` composable to create a reactive and SSR-friendly shared state across components.
`useState` is an SSR-friendly [`ref`](https://v3.vuejs.org/api/refs-api.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key. `useState` is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
## Signature ## Signature
@ -15,7 +15,7 @@ useState<T>(key: string, init?: () => T): Ref<T>
* **T**: (typescript only) Specify the type of state * **T**: (typescript only) Specify the type of state
::alert{icon=👉} ::alert{icon=👉}
`useState` only works during `setup` or [`Lifecycle Hooks`](https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html#lifecycle-hooks). `useState` only works during `setup` or [`Lifecycle Hooks`](https://vuejs.org/api/composition-api-lifecycle.html#composition-api-lifecycle-hooks).
:: ::
## Best practices ## Best practices

14
docs/content/3.docs/2.directory-structure/10.pages.md
View File

@ -10,7 +10,7 @@ head.title: Pages directory
The `pages/` directory is optional, meaning that if you only use [app.vue](/docs/directory-structure/app), `vue-router` won't be included, reducing your application's bundle size. The `pages/` directory is optional, meaning that if you only use [app.vue](/docs/directory-structure/app), `vue-router` won't be included, reducing your application's bundle size.
:: ::
Nuxt will automatically integrate [Vue Router](https://next.router.vuejs.org/) and map `pages/` directory into the routes of your application. Nuxt will automatically integrate [Vue Router](https://router.vuejs.org/) and map `pages/` directory into the routes of your application.
::alert{type=warning} ::alert{type=warning}
Unlike components, your pages must have a single root element to allow Nuxt to apply route transitions between pages. Unlike components, your pages must have a single root element to allow Nuxt to apply route transitions between pages.
@ -18,7 +18,7 @@ Unlike components, your pages must have a single root element to allow Nuxt to a
## Dynamic Routes ## Dynamic Routes
If you place anything within square brackets, it will be turned into a [dynamic route](https://next.router.vuejs.org/guide/essentials/dynamic-matching.html) parameter. You can mix and match multiple parameters and even non-dynamic text within a file name or directory. If you place anything within square brackets, it will be turned into a [dynamic route](https://router.vuejs.org/guide/essentials/dynamic-matching.html) parameter. You can mix and match multiple parameters and even non-dynamic text within a file name or directory.
If you need a catch-all route, you create it by using a file named like `[...slug].vue`. This will match _all_ routes under that path, and thus it doesn't support any non-dynamic text. If you need a catch-all route, you create it by using a file named like `[...slug].vue`. This will match _all_ routes under that path, and thus it doesn't support any non-dynamic text.
@ -88,12 +88,12 @@ The `<NuxtLink>` component should be used for all internal links. That means for
``` ```
::alert{type="info"} ::alert{type="info"}
If you want to know more about `<RouterLink>`, read the [Vue Router documentation](https://next.router.vuejs.org/api/#router-link) for more information. If you want to know more about `<RouterLink>`, read the [Vue Router documentation](https://router.vuejs.org/api/#router-link) for more information.
:: ::
## Nested Routes ## Nested Routes
We provide a semantic alias for `RouterView`, the `<NuxtNestedPage>` component, for displaying the children components of a [nested route](https://next.router.vuejs.org/guide/essentials/nested-routes.html). We provide a semantic alias for `RouterView`, the `<NuxtNestedPage>` component, for displaying the children components of a [nested route](https://router.vuejs.org/guide/essentials/nested-routes.html).
Example: Example:
@ -178,9 +178,9 @@ console.log(route.meta.title) // My home page
</script> </script>
``` ```
If you are using nested routes, the page metadata from all these routes will be merged into a single object. For more on route meta, see the [vue-router docs](https://next.router.vuejs.org/guide/advanced/meta.html#route-meta-fields). If you are using nested routes, the page metadata from all these routes will be merged into a single object. For more on route meta, see the [vue-router docs](https://router.vuejs.org/guide/advanced/meta.html#route-meta-fields).
Much like `defineEmits` or `defineProps` (see [Vue docs](https://v3.vuejs.org/api/sfc-script-setup.html#defineprops-and-defineemits)), `definePageMeta` is a **compiler macro**. It will be compiled away so you cannot reference it within your component. Instead, the metadata passed to it will be hoisted out of the component. Therefore, the page meta object cannot reference the component (or values defined on the component). However, it can reference imported bindings. Much like `defineEmits` or `defineProps` (see [Vue docs](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)), `definePageMeta` is a **compiler macro**. It will be compiled away so you cannot reference it within your component. Instead, the metadata passed to it will be hoisted out of the component. Therefore, the page meta object cannot reference the component (or values defined on the component). However, it can reference imported bindings.
```vue ```vue
<script setup> <script setup>
@ -213,4 +213,4 @@ You can define middleware to apply before loading this page. It will be merged w
#### `layoutTransition` and `pageTransition` #### `layoutTransition` and `pageTransition`
You can define transition properties for the `<transition>` components that wraps your pages and layouts, or pass `false` to disable the `<transition>` wrapper for that route. [More about transitions](https://v3.vuejs.org/guide/transitions-overview.html). You can define transition properties for the `<transition>` components that wraps your pages and layouts, or pass `false` to disable the `<transition>` wrapper for that route. [More about transitions](https://vuejs.org/guide/built-ins/transition.html#transition).

4
docs/content/3.docs/2.directory-structure/15.app.md
View File

@ -10,7 +10,7 @@ The `app.vue` file is the main component in your Nuxt 3 applications.
## Minimal usage ## Minimal usage
With Nuxt 3, the [`pages/`](/docs/directory-structure/pages) directory is optional. If not present, Nuxt won't include [vue-router](https://next.router.vuejs.org/) dependency. This is useful when working on a landing page or an application that does not need routing. With Nuxt 3, the [`pages/`](/docs/directory-structure/pages) directory is optional. If not present, Nuxt won't include [vue-router](https://router.vuejs.org/) dependency. This is useful when working on a landing page or an application that does not need routing.
```vue [app.vue] ```vue [app.vue]
<template> <template>
@ -33,7 +33,7 @@ If you have a [`pages/`](/docs/directory-structure/pages) directory, to display
``` ```
::alert{type=info} ::alert{type=info}
Since Nuxt 3 uses [`<Suspense>`](https://v3.vuejs.org/guide/migration/suspense.html) inside `<NuxtPage>`, we recommend to wrap it into a single root element. Since Nuxt 3 uses [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense.html#suspense) inside `<NuxtPage>`, we recommend to wrap it into a single root element.
:: ::
::alert{type=warning} ::alert{type=warning}

2
docs/content/3.docs/2.directory-structure/4.components.md
View File

@ -6,7 +6,7 @@ head.title: Components directory
# Components directory # Components directory
The `components/` directory is where you put all your Vue components which can then be imported inside your pages or other components ([learn more](https://v3.vuejs.org/guide/component-basics.html)). The `components/` directory is where you put all your Vue components which can then be imported inside your pages or other components ([learn more](https://vuejs.org/guide/essentials/component-basics.html#components-basics)).
Nuxt automatically imports any components in your `components/` directory (along with components that are registered by any modules you may be using). Nuxt automatically imports any components in your `components/` directory (along with components that are registered by any modules you may be using).

4
docs/content/3.docs/2.directory-structure/7.middleware.md
View File

@ -38,7 +38,7 @@ Nuxt provides two globally available helpers that can be returned directly from
1. `navigateTo (route: string | Route)` - Redirects to the given route, within plugins or middleware. It can also be called directly on client side to perform a page navigation. 1. `navigateTo (route: string | Route)` - Redirects to the given route, within plugins or middleware. It can also be called directly on client side to perform a page navigation.
2. `abortNavigation (err?: string | Error)` - Aborts the navigation, with an optional error message. 2. `abortNavigation (err?: string | Error)` - Aborts the navigation, with an optional error message.
Unlike, navigation guards in [the vue-router docs](https://next.router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards), a third `next()` argument is not passed, and redirects or route cancellation is handled by returning a value from the middleware. Possible return values are: Unlike, navigation guards in [the vue-router docs](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards), a third `next()` argument is not passed, and redirects or route cancellation is handled by returning a value from the middleware. Possible return values are:
* nothing - does not block navigation and will move to the next middleware function, if any, or complete the route navigation * nothing - does not block navigation and will move to the next middleware function, if any, or complete the route navigation
* `navigateTo('/')` or `navigateTo({ path: '/' })` - redirects to the given path * `navigateTo('/')` or `navigateTo({ path: '/' })` - redirects to the given path
@ -46,7 +46,7 @@ Unlike, navigation guards in [the vue-router docs](https://next.router.vuejs.org
* `abortNavigation(error)` - rejects the current navigation with an error * `abortNavigation(error)` - rejects the current navigation with an error
::alert{type=warning} ::alert{type=warning}
It is advised to use the helper functions above for performing redirects or stopping navigation. Other possible return values described in [the vue-router docs](https://next.router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) may work but there may be breaking changes in future. It is advised to use the helper functions above for performing redirects or stopping navigation. Other possible return values described in [the vue-router docs](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) may work but there may be breaking changes in future.
:: ::
## Adding middleware dynamically ## Adding middleware dynamically

2
docs/content/3.docs/4.advanced/1.nuxt.md
View File

@ -35,7 +35,7 @@ Note: this is an internal interface, and some properties might change until stab
```js ```js
const nuxtApp = { const nuxtApp = {
vueApp, // the global Vue application: https://v3.vuejs.org/api/application-api.html vueApp, // the global Vue application: https://vuejs.org/api/application.html#application-api
// These let you call and add runtime NuxtApp hooks // These let you call and add runtime NuxtApp hooks
// https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/app/nuxt.ts#L18 // https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/app/nuxt.ts#L18

6
docs/content/3.docs/4.advanced/4.hooks.md
View File

@ -56,8 +56,8 @@ Hook | Arguments | Description
`app:beforeMount` | `vueApp` | Same as `app:created` `app:beforeMount` | `vueApp` | Same as `app:created`
`app:mounted` | `vueApp` | When Vue app is initialized and mounted in browser `app:mounted` | `vueApp` | When Vue app is initialized and mounted in browser
`app:rendered` | - | When SSR rendering is done `app:rendered` | - | When SSR rendering is done
`app:suspense:resolve` | `appComponent` | On [Suspense](https://v3.vuejs.org/guide/migration/suspense.html) resolved event `app:suspense:resolve` | `appComponent` | On [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) resolved event
`page:start` | `pageComponent` | On [Suspense](https://v3.vuejs.org/guide/migration/suspense.html) pending event `page:start` | `pageComponent` | On [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) pending event
`page:finish` | `pageComponent` | On [Suspense](https://v3.vuejs.org/guide/migration/suspense.html) resolved event `page:finish` | `pageComponent` | On [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) resolved event
`meta:register` | `metaRenderers` | (internal) `meta:register` | `metaRenderers` | (internal)
`vue:setup` | - | (internal) `vue:setup` | - | (internal)

2
docs/content/index.md
View File

@ -161,7 +161,7 @@ Nuxt 3 has been re-architected with a smaller core and optimized for faster perf
:icon-nuxt-bridge{.h-32} :icon-nuxt-bridge{.h-32}
:headline[Nuxt Bridge] :headline[Nuxt Bridge]
We moved to [Vue 3](https://v3.vuejs.org/) and re-wrote Nuxt after 4 years of development to make it a strong foundation for the future. We moved to [Vue 3](https://vuejs.org/) and re-wrote Nuxt after 4 years of development to make it a strong foundation for the future.
### Smooth upgrade to Nuxt 3 ### Smooth upgrade to Nuxt 3

12
packages/schema/src/config/_app.ts
View File

@ -8,7 +8,7 @@ export default {
/** /**
* Properties that will be set directly on `Vue.config` for vue@2. * Properties that will be set directly on `Vue.config` for vue@2.
* *
* @see [vue@2 Documentation](https://vuejs.org/v2/api/#Global-Config) * @see [vue@2 Documentation](https://v2.vuejs.org/v2/api/#Global-Config)
* @type {import('vue/types/vue').VueConfiguration} * @type {import('vue/types/vue').VueConfiguration}
* @version 2 * @version 2
*/ */
@ -18,7 +18,7 @@ export default {
}, },
/** /**
* Options for the Vue compiler that will be passed at build time * Options for the Vue compiler that will be passed at build time
* @see [documentation](https://v3.vuejs.org/api/application-config.html) * @see [documentation](https://vuejs.org/api/application.html#app-config-compileroptions)
* @type {import('@vue/compiler-core').CompilerOptions} * @type {import('@vue/compiler-core').CompilerOptions}
* @version 3 * @version 3
*/ */
@ -321,8 +321,8 @@ export default {
* You can either pass a string (the transition name) or an object with properties to bind * You can either pass a string (the transition name) or an object with properties to bind
* to the `<Transition>` component that will wrap your pages. * to the `<Transition>` component that will wrap your pages.
* *
* @see [vue@2 documentation](https://vuejs.org/v2/guide/transitions.html) * @see [vue@2 documentation](https://v2.vuejs.org/v2/guide/transitions.html)
* @see [vue@3 documentation](https://v3.vuejs.org/guide/transitions-enterleave.html) * @see [vue@3 documentation](https://vuejs.org/guide/built-ins/transition-group.html#enter-leave-transitions)
* @version 2 * @version 2
*/ */
pageTransition: { pageTransition: {
@ -345,8 +345,8 @@ export default {
* You can either pass a string (the transition name) or an object with properties to bind * You can either pass a string (the transition name) or an object with properties to bind
* to the `<Transition>` component that will wrap your layouts. * to the `<Transition>` component that will wrap your layouts.
* *
* @see [vue@2 documentation](https://vuejs.org/v2/guide/transitions.html) * @see [vue@2 documentation](https://v2.vuejs.org/v2/guide/transitions.html)
* @see [vue@3 documentation](https://v3.vuejs.org/guide/transitions-enterleave.html) * @see [vue@3 documentation](https://vuejs.org/guide/built-ins/transition-group.html#enter-leave-transitions)
* @version 2 * @version 2
*/ */
layoutTransition: { layoutTransition: {