docs: improve documentation (#4148)

Co-authored-by: pooya parsa <pyapar@gmail.com>
Co-authored-by: Clément Ollivier <clement.o2p@gmail.com>
Co-authored-by: Anjorin Damilare <damilareanjorin1@gmail.com>
This commit is contained in:
Conner 2022-04-11 23:00:43 +02:00 committed by GitHub
parent 4d1a6ba6ce
commit 9fc848567e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 82 additions and 12 deletions

View File

@ -1,10 +1,10 @@
# Modules
::ReadMore{link="https://modules.nuxtjs.org/?version=3.x" title="Nuxt 3 Compatible Modules"}
::
Nuxt modules make integrations super simple. You don't have to develop everything from scratch nor bear with maintaining an extra boilerplate when there is already a Nuxt module for it. Adding Nuxt modules is possible using [`nuxt.config`](/api/configuration/nuxt.config#modules).
::ReadMore{link="/guide/going-further/modules" title="Module Author Guide"}
::
You can find a list of [Nuxt 3 compatible modules here](https://modules.nuxtjs.org/?version=3.x).
Everyone has the opportunity to develop modules. Read more about developing modules in the [Module Author Guide](/guide/going-further/modules).
::NeedContribution
::

View File

@ -1,7 +1,47 @@
# `useHead`
::ReadMore{link="/guide/features/head-management"}
Nuxt provides a composable to update the head properties of your page with an [`MetaObject`](/api/composables/use-head/#metaobject) of meta properties with keys corresponding to meta tags:
`title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. Alternatively, you can pass a function returning the object for reactive metadata.
```js
useHead(options: MetaObject)
```
::alert{icon=👉}
**`useHead` only works during `setup`**.
::
::NeedContribution
::
## Example
The example below changes the website's title in the `meta` and inserts a Google Font using the `link` property.
```js
export default {
setup () {
useHead({
meta: [
{ name: 'title' content: 'Nuxt 3 - The Hybrid Vue Framework' }
],
link: [
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', crossorigin: '' },
]
})
}
}
```
## `MetaObject`
* **charset**: the character encoding in which the document is encoded => `<meta charset="<value>" />` (default: `'utf-8'`)
* **viewport**: configuration of the viewport (the area of the window in which web content can be seen) => `<meta name="viewport" content="<value>" />` (default: `'width=device-width, initial-scale=1'`)
* **meta**: array, each item maps to a newly-created `<meta>` element, where object properties map to attributes.
* **link**: array, each item maps to a newly-created `<link>` element, where object properties map to attributes.
* **style**: array, each item maps to a newly-created `<style>` element, where object properties map to attributes.
* **script**: array, each item maps to a newly-created `<script>` element, where object properties map to attributes.
All elements in the meta object are optional. You can also pass only single values.

View File

@ -1,7 +1,24 @@
# `clearError`
Nuxt provides a composable to clear all handled errors.
Within your pages, components, and plugins, you can use `clearError` to clear all errors and redirect the user.
**Parameters:**
- `redirect` (optional): `string`
You can provide an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
```js
// Without redirect
clearError()
// With redirect
clearError('/homepage')
```
Errors are set in state using [`useError()`](/api/composables/useError). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
::ReadMore{link="/guide/features/error-handling"}
::
::NeedContribution
::

View File

@ -1,7 +1,20 @@
# `throwError`
Nuxt provides a quick and simple way to throw errows.
Within your pages, components and plugins you can use `throwError` to throw an error.
**Parameters:**
- `error`: `string | Error`
```js
throwError("😱 Oh no, an error has been thrown.")
```
The thrown error is set in state using [`useError()`](/api/composables/useError) to create a reactive and SSR-friendly shared error state across components.
`throwError` calls the `app:error` hook.
::ReadMore{link="/guide/features/error-handling"}
::
::NeedContribution
::