mirror of https://github.com/nuxt/nuxt.git
docs: improve components page
This commit is contained in:
Sébastien Chopin
GitHub
parent
d3d09d5d3d
commit
340725bb0c
|
|
@ -17,7 +17,7 @@ Nuxt automatically imports any components in your `components/` directory (along
|
|||
--| TheFooter.vue
|
||||
```
|
||||
|
||||
```html{}[layouts/default.vue]
|
||||
```html [layouts/default.vue]
|
||||
<template>
|
||||
<div>
|
||||
<TheHeader />
|
||||
|
|
@ -31,7 +31,7 @@ Nuxt automatically imports any components in your `components/` directory (along
|
|||
|
||||
By default, only the `~/components` directory is scanned. If you want to add other directories, or change how the components are scanned within a subfolder of this directory, you can add additional directories to the configuration:
|
||||
|
||||
```js
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
components: [
|
||||
{ path: '~/components/special-components', prefix: 'Special' },
|
||||
|
|
@ -119,7 +119,6 @@ If you are using `resolveComponent` to handle dynamic components, make sure not
|
|||
Alternatively, though not recommended, you can register all your components globally, which will create async chunks for all your components and make them available throughout your application.
|
||||
|
||||
```diff
|
||||
|
||||
export default defineNuxtConfig({
|
||||
components: {
|
||||
+ global: true,
|
||||
|
|
@ -138,7 +137,7 @@ The `global` option can also be set per component directory.
|
|||
|
||||
To dynamically import a component (also known as lazy-loading a component) all you need to do is add the `Lazy` prefix to the component's name.
|
||||
|
||||
```html{}[layouts/default.vue]
|
||||
```html [layouts/default.vue]
|
||||
<template>
|
||||
<div>
|
||||
<TheHeader />
|
||||
|
|
@ -150,7 +149,7 @@ To dynamically import a component (also known as lazy-loading a component) all y
|
|||
|
||||
This is particularly useful if the component is not always needed. By using the `Lazy` prefix you can delay loading the component code until the right moment, which can be helpful for optimizing your JavaScript bundle size.
|
||||
|
||||
```html{}[pages/index.vue]
|
||||
```html [pages/index.vue]
|
||||
<template>
|
||||
<div>
|
||||
<h1>Mountains</h1>
|
||||
|
|
@ -174,7 +173,7 @@ export default {
|
|||
|
||||
You can also explicitly import components from `#components` if you want or need to bypass Nuxt's auto-importing functionality.
|
||||
|
||||
```html{}[pages/index.vue]
|
||||
```html [pages/index.vue]
|
||||
<template>
|
||||
<div>
|
||||
<h1>Mountains</h1>
|
||||
|
|
@ -194,7 +193,7 @@ You can also explicitly import components from `#components` if you want or need
|
|||
|
||||
Nuxt provides the `<ClientOnly>` component for purposely rendering a component only on client side. To import a component only on the client, register the component in a client-side only plugin.
|
||||
|
||||
```html{}[pages/example.vue]
|
||||
```html [pages/example.vue]
|
||||
<template>
|
||||
<div>
|
||||
<Sidebar />
|
||||
|
|
@ -208,7 +207,7 @@ Nuxt provides the `<ClientOnly>` component for purposely rendering a component o
|
|||
|
||||
Use a slot as fallback until `<ClientOnly>` is mounted on client side.
|
||||
|
||||
```html{}[pages/example.vue]
|
||||
```html [pages/example.vue]
|
||||
<template>
|
||||
<div>
|
||||
<Sidebar />
|
||||
|
|
@ -239,7 +238,7 @@ If a component is meant to be rendered only client-side, you can add the `.clien
|
|||
--| Comments.client.vue
|
||||
```
|
||||
|
||||
```html{}[pages/example.vue]
|
||||
```html [pages/example.vue]
|
||||
<template>
|
||||
<div>
|
||||
<!-- this component will only be rendered on client side -->
|
||||
|
|
@ -264,6 +263,10 @@ This feature only works with Nuxt auto-imports and `#components` imports. Explic
|
|||
|
||||
Standalone server components will always be rendered on the server. When their props update, this will result in a network request that will update the rendered HTML in-place.
|
||||
|
||||
:video-player{src="https://www.youtube.com/watch?v=u1yyXe86xJM"}
|
||||
|
||||
> A video made by [LearnVue](https://go.learnvue.co) for the Nuxt documentation.
|
||||
|
||||
Server components are currently experimental and in order to use them, you need to enable the 'component islands' feature in your nuxt.config:
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
|
|
@ -281,7 +284,7 @@ Now you can register server-only components with the `.server` suffix and use th
|
|||
--| HighlightedMarkdown.server.vue
|
||||
```
|
||||
|
||||
```html{}[pages/example.vue]
|
||||
```html [pages/example.vue]
|
||||
<template>
|
||||
<div>
|
||||
<!--
|
||||
|
|
@ -307,7 +310,7 @@ In this case, the `.server` + `.client` components are two 'halves' of a compone
|
|||
--| Comments.server.vue
|
||||
```
|
||||
|
||||
```html{}[pages/example.vue]
|
||||
```html [pages/example.vue]
|
||||
<template>
|
||||
<div>
|
||||
<!-- this component will render Comments.server server-side then Comments.client once mounted in client-side -->
|
||||
|
|
@ -326,7 +329,7 @@ Nuxt provides the `<DevOnly>` component to render a component only during develo
|
|||
|
||||
The content will not be included in production builds and tree-shaken.
|
||||
|
||||
```html{}[pages/example.vue]
|
||||
```html [pages/example.vue]
|
||||
<template>
|
||||
<div>
|
||||
<Sidebar />
|
||||
|
|
@ -343,7 +346,7 @@ The content will not be included in production builds and tree-shaken.
|
|||
Nuxt provides the `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR.
|
||||
You can specify a `fallbackTag` to make it render a specific tag if it fails to render on the server.
|
||||
|
||||
```html{}[pages/example.vue]
|
||||
```html [pages/example.vue]
|
||||
<template>
|
||||
<div>
|
||||
<Sidebar />
|
||||
|
|
@ -378,16 +381,16 @@ Imagine a directory structure like this:
|
|||
|
||||
Then in `awesome-ui/nuxt.js` you can use the `components:dirs` hook:
|
||||
|
||||
```js
|
||||
import { defineNuxtModule } from '@nuxt/kit'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
```ts
|
||||
import { defineNuxtModule, createResolver } from '@nuxt/kit'
|
||||
|
||||
export default defineNuxtModule({
|
||||
hooks: {
|
||||
'components:dirs'(dirs) {
|
||||
'components:dirs': (dirs) => {
|
||||
const { resolve } = createResolver(import.meta.url)
|
||||
// Add ./components dir to the list
|
||||
dirs.push({
|
||||
path: fileURLToPath(new URL('./components', import.meta.url)),
|
||||
path: fileURLToPath(resolve('./components')),
|
||||
prefix: 'awesome'
|
||||
})
|
||||
}
|
||||
|
|
@ -397,10 +400,10 @@ export default defineNuxtModule({
|
|||
|
||||
That's it! Now in your project, you can import your UI library as a Nuxt module in your `nuxt.config` file:
|
||||
|
||||
```js
|
||||
export default {
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['awesome-ui/nuxt']
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
... and directly use the module components (prefixed with `awesome-`) in our `pages/index.vue`:
|
||||
|
|
@ -416,5 +419,4 @@ export default {
|
|||
|
||||
It will automatically import the components only if used and also support HMR when updating your components in `node_modules/awesome-ui/components/`.
|
||||
|
||||
::LinkExample{link="/docs/examples/auto-imports/components"}
|
||||
::
|
||||
:LinkExample{link="/docs/examples/auto-imports/components"}
|
||||
|
|
|
|||
Loading…
Reference in New Issue