mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 21:55:11 +00:00
docs: add note for usage (#1921)
This commit is contained in:
parent
5786949d9b
commit
b69ebbbfd7
@ -2,6 +2,10 @@
|
|||||||
|
|
||||||
Nuxt provides `useFetch`, `useLazyFetch`, `useAsyncData` and `useLazyAsyncData` to handle data fetching within your application.
|
Nuxt provides `useFetch`, `useLazyFetch`, `useAsyncData` and `useLazyAsyncData` to handle data fetching within your application.
|
||||||
|
|
||||||
|
::alert{icon=👉}
|
||||||
|
**`useFetch`, `useLazyFetch`, `useAsyncData` and `useLazyAsyncData` only works during `setup` or `Lifecycle Hooks`**
|
||||||
|
::
|
||||||
|
|
||||||
## `useAsyncData`
|
## `useAsyncData`
|
||||||
|
|
||||||
Within your pages, components and plugins you can use `useAsyncData` to get access to data that resolves asynchronously.
|
Within your pages, components and plugins you can use `useAsyncData` to get access to data that resolves asynchronously.
|
||||||
@ -57,10 +61,6 @@ Within your pages, components and plugins you can use `useFetch` to get universa
|
|||||||
|
|
||||||
This composable provides a convenient wrapper around `useAsyncData` and `$fetch` and automatically generates a key based on url and fetch options and infers API response type.
|
This composable provides a convenient wrapper around `useAsyncData` and `$fetch` and automatically generates a key based on url and fetch options and infers API response type.
|
||||||
|
|
||||||
::alert{icon=👉}
|
|
||||||
**`useFetch` only works during `setup` or `Lifecycle Hooks`**
|
|
||||||
::
|
|
||||||
|
|
||||||
### Usage
|
### Usage
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
|
@ -19,6 +19,10 @@ function useMyComposable () {
|
|||||||
|
|
||||||
Plugins also receive `nuxtApp` as the first argument for convenience. [Read more about plugins.](/docs/directory-structure/plugins)
|
Plugins also receive `nuxtApp` as the first argument for convenience. [Read more about plugins.](/docs/directory-structure/plugins)
|
||||||
|
|
||||||
|
::alert{icon=👉}
|
||||||
|
**`useNuxtApp` (on server side) only works during `setup`, inside Nuxt plugins or `Lifecycle Hooks`**
|
||||||
|
::
|
||||||
|
|
||||||
## Providing helpers
|
## Providing helpers
|
||||||
|
|
||||||
You can provide helpers to be usable across all composables and application. This usually happens within a nuxt plugin.
|
You can provide helpers to be usable across all composables and application. This usually happens within a nuxt plugin.
|
||||||
|
@ -73,6 +73,10 @@ const config = useRuntimeConfig()
|
|||||||
|
|
||||||
**🛑 Security note:** Never use example above if `API_AUTH_TOKEN` is a private config. Even if you use `privateRuntimeConfig`, you have to be still careful you do not expose such config to either payload or html!
|
**🛑 Security note:** Never use example above if `API_AUTH_TOKEN` is a private config. Even if you use `privateRuntimeConfig`, you have to be still careful you do not expose such config to either payload or html!
|
||||||
|
|
||||||
|
::alert{icon=👉}
|
||||||
|
**`useRuntimeConfig` only works during `setup` or `Lifecycle Hooks`**
|
||||||
|
::
|
||||||
|
|
||||||
### API routes
|
### API routes
|
||||||
|
|
||||||
Within the API routes, you can access runtime config by directly importing from virtual `#config`.
|
Within the API routes, you can access runtime config by directly importing from virtual `#config`.
|
||||||
|
Loading…
Reference in New Issue
Block a user