mirror of
https://github.com/nuxt/nuxt.git
synced 2025-02-16 21:58:19 +00:00
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:
parent
4d1a6ba6ce
commit
9fc848567e
@ -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
|
||||
::
|
||||
|
@ -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.
|
||||
|
@ -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
|
||||
::
|
||||
|
@ -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
|
||||
::
|
||||
|
Loading…
Reference in New Issue
Block a user