-
Notifications
You must be signed in to change notification settings - Fork 54
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of github.com:Intevel/nuxt-directus
- Loading branch information
Showing
10 changed files
with
381 additions
and
204 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,59 +1,80 @@ | ||
# Options | ||
|
||
Configure Nuxt Directus easily with the `directus` property. | ||
|
||
--- | ||
|
||
```ts [nuxt.config] | ||
export default { | ||
// Defaults options | ||
directus: { | ||
autoFetch: true, | ||
} | ||
} | ||
``` | ||
|
||
## `url` | ||
|
||
- No default - **Required** | ||
|
||
The url to which requests are made to. | ||
|
||
## `autoFetch` | ||
|
||
- Default: `true` | ||
|
||
Should the user be fetched automatically | ||
|
||
## `fetchUserParams` | ||
|
||
- No default - **Optional** | ||
|
||
The Parameters which should be sent when the user is fetched, see [DirectusQueryParams](https://github.com/directus-community/nuxt-directus/blob/313a5a227e1d8b88a43d92c79b47a87d92a21fc5/src/runtime/types/index.d.ts#L26) | ||
|
||
## `token` | ||
|
||
- No default - **Optional** | ||
|
||
A static token | ||
|
||
## `cookieNameToken` | ||
|
||
- Default: `directus_token` | ||
|
||
Specify the cookie name of the directus auth token | ||
|
||
## `cookieNameRefreshToken` | ||
|
||
- Default: `directus_refresh_token` | ||
|
||
Specify the cookie name of the directus refresh auth token | ||
|
||
## `devtools` | ||
|
||
- Default: `false` | ||
|
||
Activate the Nuxt Devtools, checkout [Devtools](/getting-started/devtools) before activating | ||
|
||
::feedback-box | ||
:: | ||
# Options | ||
|
||
Configure Nuxt Directus easily with the `directus` property. | ||
|
||
--- | ||
|
||
```ts [nuxt.config] | ||
export default { | ||
// Defaults options | ||
directus: { | ||
autoFetch: true, | ||
} | ||
} | ||
``` | ||
|
||
## `url` | ||
|
||
- No default - **Required** | ||
|
||
The url to which requests are made to. | ||
|
||
## `autoFetch` | ||
|
||
- Default: `true` | ||
|
||
Should the user be fetched automatically | ||
|
||
## `autoRefresh` | ||
|
||
- Default: `true` | ||
|
||
Auto refesh tokens | ||
|
||
|
||
## `onAutoRefreshFailure()` | ||
|
||
- Default: `not defined` | ||
|
||
The function that get called if the `autoRefresh` fail | ||
|
||
## `maxAgeRefreshToken` | ||
|
||
- Default: `604800` | ||
|
||
Need to be the same as specified in your directus config; this is the max amount of milliseconds that your refresh cookie will be kept in the browser. | ||
|
||
Auto refesh tokens | ||
|
||
## `fetchUserParams` | ||
|
||
- No default - **Optional** | ||
|
||
The Parameters which should be sent when the user is fetched, see [DirectusQueryParams](https://github.com/directus-community/nuxt-directus/blob/313a5a227e1d8b88a43d92c79b47a87d92a21fc5/src/runtime/types/index.d.ts#L26) | ||
|
||
## `token` | ||
|
||
- No default - **Optional** | ||
|
||
A static token | ||
|
||
## `cookieNameToken` | ||
|
||
- Default: `directus_token` | ||
|
||
Specify the cookie name of the directus auth token | ||
|
||
## `cookieNameRefreshToken` | ||
|
||
- Default: `directus_refresh_token` | ||
|
||
Specify the cookie name of the directus refresh auth token | ||
|
||
## `devtools` | ||
|
||
- Default: `false` | ||
|
||
Activate the Nuxt Devtools, checkout [Devtools](/getting-started/devtools) before activating | ||
|
||
::feedback-box | ||
:: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
# useAsyncData | ||
|
||
--- | ||
|
||
Using `useAsyncData` composable allows your app to fetch data more efficiently with status control (pending, error) and the refresh function option. | ||
Check [Nuxt 3 documentation](https://nuxt.com/docs/api/composables/use-async-data) for more details on `useAsyncData` | ||
|
||
```js | ||
const { getItemById } = useDirectusItems(); | ||
|
||
const { | ||
data: myCollection, | ||
pending, | ||
error, | ||
refresh, | ||
} = await useAsyncData("myCollection", () => | ||
getItemById({ | ||
collection: myCollection, | ||
id: id, | ||
params: params, | ||
}) | ||
); | ||
``` | ||
::feedback-box | ||
:: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
# Redirect user to login | ||
|
||
--- | ||
|
||
You can protect your authenticated routes by creating a custom middleware in your project, here is an example: | ||
|
||
Create `./middleware/auth.ts` | ||
|
||
```ts | ||
export default defineNuxtRouteMiddleware((to, _from) => { | ||
const user = useDirectusUser(); | ||
|
||
if (!user.value) { | ||
return navigateTo("/login"); | ||
} | ||
}); | ||
``` | ||
|
||
Now you can add the middleware to your pages | ||
|
||
```ts | ||
<script setup lang="ts"> | ||
definePageMeta({ | ||
middleware: ["auth"] | ||
}) | ||
</script> | ||
``` | ||
|
||
::feedback-box | ||
:: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
title: Examples | ||
icon: heroicons-outline:chat-bubble-left-ellipsis |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
77e1ff1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
nuxt-directus – ./
nuxt-directus-docs.vercel.app
nuxt-directus-git-main-intevel.vercel.app
nuxt-directus-intevel.vercel.app