docs: Update 5.4.0

docs/content/1.getting-started/2.options.md

@@ -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
+::

docs/content/2.composables/1.useDirectusAuth.md

@@ -104,31 +104,7 @@ const onSubmit = async () => {
 
 ## Middleware example
 
-### 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>
-```
+> Check how to Redirect user to login page [over here](/examples/redirectuserlogin).
 
 ::feedback-box
 ::

docs/content/5.examples/1.useAsyncData.md

@@ -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
+::

docs/content/5.examples/2.redirectUserLogin.md

@@ -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
+::

docs/content/5.examples/_dir.yml

@@ -0,0 +1,2 @@
+title: Examples
+icon: heroicons-outline:chat-bubble-left-ellipsis