Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 23:22:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve components page

Browse Source
This commit is contained in:
Sébastien Chopin 2023-03-23 14:47:21 +01:00 committed by GitHub
parent d3d09d5d3d
commit 340725bb0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
docs/2.guide/2.directory-structure/1.components.md
View File

@ -17,7 +17,7 @@ Nuxt automatically imports any components in your `components/` directory (along
--| TheFooter.vue --| TheFooter.vue
``` ```
```html{}[layouts/default.vue] ```html [layouts/default.vue]
<template> <template>
<div> <div>
<TheHeader /> <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: 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({ export default defineNuxtConfig({
components: [ components: [
{ path: '~/components/special-components', prefix: 'Special' }, { 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. 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 ```diff
export default defineNuxtConfig({ export default defineNuxtConfig({
components: { components: {
+ global: true, + 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. 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> <template>
<div> <div>
<TheHeader /> <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. 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> <template>
<div> <div>
<h1>Mountains</h1> <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. 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> <template>
<div> <div>
<h1>Mountains</h1> <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. 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> <template>
<div> <div>
<Sidebar /> <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. Use a slot as fallback until `<ClientOnly>` is mounted on client side.
```html{}[pages/example.vue] ```html [pages/example.vue]
<template> <template>
<div> <div>
<Sidebar /> <Sidebar />
@ -239,7 +238,7 @@ If a component is meant to be rendered only client-side, you can add the `.clien
--| Comments.client.vue --| Comments.client.vue
``` ```
```html{}[pages/example.vue] ```html [pages/example.vue]
<template> <template>
<div> <div>
<!-- this component will only be rendered on client side --> <!-- 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. 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: 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] ```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 --| HighlightedMarkdown.server.vue
``` ```
```html{}[pages/example.vue] ```html [pages/example.vue]
<template> <template>
<div> <div>
<!-- <!--
@ -307,7 +310,7 @@ In this case, the `.server` + `.client` components are two 'halves' of a compone
--| Comments.server.vue --| Comments.server.vue
``` ```
```html{}[pages/example.vue] ```html [pages/example.vue]
<template> <template>
<div> <div>
<!-- this component will render Comments.server server-side then Comments.client once mounted in client-side --> <!-- 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. The content will not be included in production builds and tree-shaken.
```html{}[pages/example.vue] ```html [pages/example.vue]
<template> <template>
<div> <div>
<Sidebar /> <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. 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. 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> <template>
<div> <div>
<Sidebar /> <Sidebar />
@ -378,16 +381,16 @@ Imagine a directory structure like this:
Then in `awesome-ui/nuxt.js` you can use the `components:dirs` hook: Then in `awesome-ui/nuxt.js` you can use the `components:dirs` hook:
```js ```ts
import { defineNuxtModule } from '@nuxt/kit' import { defineNuxtModule, createResolver } from '@nuxt/kit'
import { fileURLToPath } from 'node:url'
export default defineNuxtModule({ export default defineNuxtModule({
hooks: { hooks: {
'components:dirs'(dirs) { 'components:dirs': (dirs) => {
const { resolve } = createResolver(import.meta.url)
// Add ./components dir to the list // Add ./components dir to the list
dirs.push({ dirs.push({
path: fileURLToPath(new URL('./components', import.meta.url)), path: fileURLToPath(resolve('./components')),
prefix: 'awesome' 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: That's it! Now in your project, you can import your UI library as a Nuxt module in your `nuxt.config` file:
```js ```ts [nuxt.config.ts]
export default { export default defineNuxtConfig({
modules: ['awesome-ui/nuxt'] modules: ['awesome-ui/nuxt']
} })
``` ```
... and directly use the module components (prefixed with `awesome-`) in our `pages/index.vue`: ... 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/`. 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"}
::