From f0adc5698153d4f69736d9818bb9a5434e2d7808 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Thu, 11 Nov 2021 19:33:12 +0800 Subject: [PATCH 1/7] docs: init built-in components page --- .../3.docs/1.usage/6.builtin-components.md | 87 +++++++++++++++++++ docs/yarn.lock | 8 +- 2 files changed, 91 insertions(+), 4 deletions(-) create mode 100644 docs/content/3.docs/1.usage/6.builtin-components.md diff --git a/docs/content/3.docs/1.usage/6.builtin-components.md b/docs/content/3.docs/1.usage/6.builtin-components.md new file mode 100644 index 00000000000..ce72b65d1ec --- /dev/null +++ b/docs/content/3.docs/1.usage/6.builtin-components.md @@ -0,0 +1,87 @@ +# Built-in Components + +Nuxt comes with a few components included out of the box, which will be helpful when building your application. The components are globally available. + +## General + +### `` + +This component is used to purposely render 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] + +``` + +Use a slot as fallback until `` is mounted on client-side. + +```html{}[pages/example.vue] + +``` + +## Router + +The following components are available when you enables [Vue Router](https://next.router.vuejs.org/) via having the [`pages/` directory](/directory-structure/pages) in your project (it's optional in Nuxt 3). + +### `` + +To navigate between pages of your app, you should use the  `` component. This component is included with Nuxt and therefore you don't have to import it like you do with other components. It is similar to the HTML `` tag except that instead of using a `href="/about"` you use `to="/about"`. If you've used `vue-router` before, you can think of `` as a replacement of `` + +A simple link to the `index.vue` page in your `pages` folder: + +```html + +``` + +The `` component should be used for all internal links. That means for all links to the pages within your site you should use ``. The `` tag should be used for all external links. That means if you have links to other websites you should use the `` tag for those. + +```html + +``` + +::alert{type="info"} +If you want to know more about ``, read the [Vue Router documentation](https://next.router.vuejs.org/api/#router-link) for more information. +:: + +### `` + +// TODO + +### `` + +// TODO + +### `` + +// TODO + + diff --git a/docs/yarn.lock b/docs/yarn.lock index 8f757152ec3..92a1b4c8edf 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -10253,10 +10253,10 @@ std-env@^2.2.1, std-env@^2.3.0, std-env@^2.3.1: dependencies: ci-info "^3.1.1" -std-env@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.0.0.tgz#8dbd16bd2aadc18992072e2f5839e897f4ee2733" - integrity sha512-GoFEqAGzhaexp/T01rIiLOK9LHa6HmVwEUyeU4cwdSnOhfxpw9IMeAFi44SHWbCErEs29qEh7vAOUbtUmoycjA== +std-env@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.0.1.tgz#bc4cbc0e438610197e34c2d79c3df30b491f5182" + integrity sha512-mC1Ps9l77/97qeOZc+HrOL7TIaOboHqMZ24dGVQrlxFcpPpfCHpH+qfUT7Dz+6mlG8+JPA1KfBQo19iC/+Ngcw== stream-browserify@^2.0.1: version "2.0.2" From 353ed8bfd824ce0352720632225459d3c13d303b Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Fri, 12 Nov 2021 09:58:28 +0800 Subject: [PATCH 2/7] chore: update about `` --- .../3.docs/1.usage/6.builtin-components.md | 43 +++++++++++++- .../3.docs/2.directory-structure/9.pages.md | 59 ++----------------- 2 files changed, 46 insertions(+), 56 deletions(-) diff --git a/docs/content/3.docs/1.usage/6.builtin-components.md b/docs/content/3.docs/1.usage/6.builtin-components.md index ce72b65d1ec..7f18438f81f 100644 --- a/docs/content/3.docs/1.usage/6.builtin-components.md +++ b/docs/content/3.docs/1.usage/6.builtin-components.md @@ -74,11 +74,50 @@ If you want to know more about ``, read the [Vue Router documentati ### `` -// TODO +// TODO: ### `` -// TODO +This component is used for displaying the children components in a nested route. + +Example: + +``` +-| pages/ +---| parent/ +------| child.vue +---| parent.vue +``` + +This file tree will generate these routes: + +```js +[ + { + path: '/parent', + component: '~/pages/parent.vue', + name: 'parent', + children: [ + { + path: 'child', + component: '~/pages/parent/child.vue', + name: 'parent-child' + } + ] + } +] +``` + +To display the `child.vue` component, you have to insert the `` component inside `pages/parent.vue`: + +```html{}[pages/parent.vue] + +``` ### `` diff --git a/docs/content/3.docs/2.directory-structure/9.pages.md b/docs/content/3.docs/2.directory-structure/9.pages.md index a42176048a2..62df6d2fdb8 100644 --- a/docs/content/3.docs/2.directory-structure/9.pages.md +++ b/docs/content/3.docs/2.directory-structure/9.pages.md @@ -48,61 +48,12 @@ admins 123 ## Nested Routes -We provide a semantic alias for `RouterView`, the `NuxtChild` 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 `` component, for displaying the children components of a [nested route](https://next.router.vuejs.org/guide/essentials/nested-routes.html). -### Example - -```bash --| pages/ ----| parent/ -------| child.vue ----| parent.vue -``` - -To display the `child.vue` component, simply put the `` component inside the `parent.vue` component: - -```html{}[pages/parent/child.vue] - -``` +Refer to [the `` component](/docs/usage/builtin-components#nuxtchild) for more information. -```html{}[pages/parent.vue] - +## Navigation - - -``` +To navigate between pages of your app, you should use the `` component. -The example file tree above should generate these routes: - -```js -[ - { - path: '/parent', - component: '~/pages/parent.vue', - name: 'parent', - children: [ - { - path: 'child', - component: '~/pages/parent/child.vue', - name: 'parent-child' - } - ] - } -] -``` +Refer to [the `` component](/docs/usage/builtin-components#nuxtlink) for more information. From d47e45d366837933231beecb2583ad60ec1d011e Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Fri, 12 Nov 2021 09:59:12 +0800 Subject: [PATCH 3/7] chore: fix link --- docs/content/3.docs/1.usage/6.builtin-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/3.docs/1.usage/6.builtin-components.md b/docs/content/3.docs/1.usage/6.builtin-components.md index 7f18438f81f..9474e132b07 100644 --- a/docs/content/3.docs/1.usage/6.builtin-components.md +++ b/docs/content/3.docs/1.usage/6.builtin-components.md @@ -40,7 +40,7 @@ Use a slot as fallback until `` is mounted on client-side. ## Router -The following components are available when you enables [Vue Router](https://next.router.vuejs.org/) via having the [`pages/` directory](/directory-structure/pages) in your project (it's optional in Nuxt 3). +The following components are available when you enables [Vue Router](https://next.router.vuejs.org/) via having the [`pages/` directory](/docs/directory-structure/pages) in your project (it's optional in Nuxt 3). ### `` From 856883f5549484911518c90f026f71bbd2586b93 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Fri, 12 Nov 2021 09:59:25 +0800 Subject: [PATCH 4/7] chore: lint --- docs/content/3.docs/1.usage/6.builtin-components.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/content/3.docs/1.usage/6.builtin-components.md b/docs/content/3.docs/1.usage/6.builtin-components.md index 9474e132b07..5c98aa8cef8 100644 --- a/docs/content/3.docs/1.usage/6.builtin-components.md +++ b/docs/content/3.docs/1.usage/6.builtin-components.md @@ -122,5 +122,3 @@ To display the `child.vue` component, you have to insert the `` co ### `` // TODO - - From 1e1ef66cd327f92e55d0a928f28ee353e8e58e0d Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 14 Nov 2021 16:32:24 +0800 Subject: [PATCH 5/7] docs: seperate sections to dirs --- .../3.docs/1.usage/6.builtin-components.md | 124 ------------------ .../2.directory-structure/4.components.md | 34 +++++ .../3.docs/2.directory-structure/9.pages.md | 69 +++++++++- 3 files changed, 99 insertions(+), 128 deletions(-) delete mode 100644 docs/content/3.docs/1.usage/6.builtin-components.md diff --git a/docs/content/3.docs/1.usage/6.builtin-components.md b/docs/content/3.docs/1.usage/6.builtin-components.md deleted file mode 100644 index 5c98aa8cef8..00000000000 --- a/docs/content/3.docs/1.usage/6.builtin-components.md +++ /dev/null @@ -1,124 +0,0 @@ -# Built-in Components - -Nuxt comes with a few components included out of the box, which will be helpful when building your application. The components are globally available. - -## General - -### `` - -This component is used to purposely render 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] - -``` - -Use a slot as fallback until `` is mounted on client-side. - -```html{}[pages/example.vue] - -``` - -## Router - -The following components are available when you enables [Vue Router](https://next.router.vuejs.org/) via having the [`pages/` directory](/docs/directory-structure/pages) in your project (it's optional in Nuxt 3). - -### `` - -To navigate between pages of your app, you should use the  `` component. This component is included with Nuxt and therefore you don't have to import it like you do with other components. It is similar to the HTML `` tag except that instead of using a `href="/about"` you use `to="/about"`. If you've used `vue-router` before, you can think of `` as a replacement of `` - -A simple link to the `index.vue` page in your `pages` folder: - -```html - -``` - -The `` component should be used for all internal links. That means for all links to the pages within your site you should use ``. The `` tag should be used for all external links. That means if you have links to other websites you should use the `` tag for those. - -```html - -``` - -::alert{type="info"} -If you want to know more about ``, read the [Vue Router documentation](https://next.router.vuejs.org/api/#router-link) for more information. -:: - -### `` - -// TODO: - -### `` - -This component is used for displaying the children components in a nested route. - -Example: - -``` --| pages/ ----| parent/ -------| child.vue ----| parent.vue -``` - -This file tree will generate these routes: - -```js -[ - { - path: '/parent', - component: '~/pages/parent.vue', - name: 'parent', - children: [ - { - path: 'child', - component: '~/pages/parent/child.vue', - name: 'parent-child' - } - ] - } -] -``` - -To display the `child.vue` component, you have to insert the `` component inside `pages/parent.vue`: - -```html{}[pages/parent.vue] - -``` - -### `` - -// TODO diff --git a/docs/content/3.docs/2.directory-structure/4.components.md b/docs/content/3.docs/2.directory-structure/4.components.md index 5df4fc8f443..dd4be09749b 100644 --- a/docs/content/3.docs/2.directory-structure/4.components.md +++ b/docs/content/3.docs/2.directory-structure/4.components.md @@ -83,6 +83,40 @@ export default { ``` +### `` Component + +Nuxt provides the `` 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] + +``` + +Use a slot as fallback until `` is mounted on client-side. + +```html{}[pages/example.vue] + +``` + ## Library Authors Making Vue component libraries with automatic tree-shaking and component registration is super easy ✨ diff --git a/docs/content/3.docs/2.directory-structure/9.pages.md b/docs/content/3.docs/2.directory-structure/9.pages.md index 62df6d2fdb8..aec68d622d4 100644 --- a/docs/content/3.docs/2.directory-structure/9.pages.md +++ b/docs/content/3.docs/2.directory-structure/9.pages.md @@ -46,14 +46,75 @@ Navigating to `/users-admins/123` would render: admins 123 ``` +### Navigation + +To navigate between pages of your app, you should use the  `` component. This component is included with Nuxt and therefore you don't have to import it like you do with other components. It is similar to the HTML `` tag except that instead of using a `href="/about"` you use `to="/about"`. If you've used `vue-router` before, you can think of `` as a replacement of `` + +A simple link to the `index.vue` page in your `pages` folder: + +```html + +``` + +The `` component should be used for all internal links. That means for all links to the pages within your site you should use ``. The `` tag should be used for all external links. That means if you have links to other websites you should use the `` tag for those. + +```html + +``` + +::alert{type="info"} +If you want to know more about ``, read the [Vue Router documentation](https://next.router.vuejs.org/api/#router-link) for more information. +:: + ## Nested Routes We provide a semantic alias for `RouterView`, the `` component, for displaying the children components of a [nested route](https://next.router.vuejs.org/guide/essentials/nested-routes.html). -Refer to [the `` component](/docs/usage/builtin-components#nuxtchild) for more information. +Example: -## Navigation +``` +-| pages/ +---| parent/ +------| child.vue +---| parent.vue +``` -To navigate between pages of your app, you should use the `` component. +This file tree will generate these routes: + +```js +[ + { + path: '/parent', + component: '~/pages/parent.vue', + name: 'parent', + children: [ + { + path: 'child', + component: '~/pages/parent/child.vue', + name: 'parent-child' + } + ] + } +] +``` + +To display the `child.vue` component, you have to insert the `` component inside `pages/parent.vue`: -Refer to [the `` component](/docs/usage/builtin-components#nuxtlink) for more information. +```html{}[pages/parent.vue] + +``` From 66727eb166e689e4c54a17a4499faab55d706687 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 14 Nov 2021 16:33:39 +0800 Subject: [PATCH 6/7] chore: update headers --- docs/content/3.docs/2.directory-structure/4.components.md | 2 +- docs/content/3.docs/2.directory-structure/9.pages.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/3.docs/2.directory-structure/4.components.md b/docs/content/3.docs/2.directory-structure/4.components.md index dd4be09749b..8dd915a81c0 100644 --- a/docs/content/3.docs/2.directory-structure/4.components.md +++ b/docs/content/3.docs/2.directory-structure/4.components.md @@ -83,7 +83,7 @@ export default { ``` -### `` Component +## `` Component Nuxt provides the `` 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. diff --git a/docs/content/3.docs/2.directory-structure/9.pages.md b/docs/content/3.docs/2.directory-structure/9.pages.md index aec68d622d4..016f0be4e0e 100644 --- a/docs/content/3.docs/2.directory-structure/9.pages.md +++ b/docs/content/3.docs/2.directory-structure/9.pages.md @@ -46,7 +46,7 @@ Navigating to `/users-admins/123` would render: admins 123 ``` -### Navigation +## Navigation To navigate between pages of your app, you should use the  `` component. This component is included with Nuxt and therefore you don't have to import it like you do with other components. It is similar to the HTML `` tag except that instead of using a `href="/about"` you use `to="/about"`. If you've used `vue-router` before, you can think of `` as a replacement of `` From e81742e71e9457a54b683df665f07678cd619361 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 14 Nov 2021 17:08:42 +0800 Subject: [PATCH 7/7] chore: fix lint --- docs/content/3.docs/2.directory-structure/9.pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/3.docs/2.directory-structure/9.pages.md b/docs/content/3.docs/2.directory-structure/9.pages.md index 016f0be4e0e..0e31a1d1f51 100644 --- a/docs/content/3.docs/2.directory-structure/9.pages.md +++ b/docs/content/3.docs/2.directory-structure/9.pages.md @@ -82,7 +82,7 @@ We provide a semantic alias for `RouterView`, the `` component, for d Example: -``` +```bash -| pages/ ---| parent/ ------| child.vue