Nuxt Directus

Directus SDK for Nuxt.

• ✔️ SSR support
• ✔️ Rest client via useDirectusRest composable based on the new Directus SDK
• ✔️ Graphql client based on Nuxt Apollo module
• ✔️ Auth handler via useDirectusAuth with auto refresh of token and auto redirection.
• ✔️ Ready to use starter

Installation

Add @bg-dev/nuxt-directus dependency to your project

1# Using npm
2npm install --save-dev @bg-dev/nuxt-directus
3
4# Using pnpm
5pnpm install --save-dev @bg-dev/nuxt-directus
6
7# Using yarn
8yarn add --dev @bg-dev/nuxt-directus

Setup

Add @bg-dev/nuxt-directus to the modules section of nuxt.config.ts and set directus options

1export default defineNuxtConfig({
2  modules: ["@bg-dev/nuxt-directus"],
3
4  directus: {
5    rest: {
6      baseUrl: "http://localhost:8055", // Directus app base url
7      nuxtBaseUrl: "http://localhost:3000", // Nuxt app base url
8    },
9    graphql: {
10      enabled: true,
11      httpEndpoint: "http://localhost:8055/graphql",
12      wsEndpoint: "", // Omit to disable Websockets
13    },
14    auth: {
15      enabled: true,
16      mode: "session", // Auth mode 'session' or 'cookie'
17      enableGlobalAuthMiddleware: false, // Enable auth middleware on every page
18      userFields: ["*"], // Select user fields
19      refreshTokenCookieName: "directus_refresh_token",
20      sessionTokenCookieName: "directus_session_token",
21      loggedInFlagName: "directus_logged_in",
22      msRefreshBeforeExpires: 10000,
23      redirect: {
24        login: "/auth/login", // Path to redirect when login is required
25        logout: "/auth/login", // Path to redirect after logout
26        home: "/home", // Path to redirect after successful login
27        resetPassword: "/auth/reset-password", // Path to redirect for password reset
28        callback: "/auth/callback", // Path to redirect after login with provider
29      },
30    },
31  },
32});

That's it! You can now use @bg-dev/nuxt-directus in your Nuxt app ✨

REST

The module has useDirectusRest composable for data fetching with REST API. It is a wrapper around Directus SDK request API with auto refresh of access token and auto-imported commands. For better DX, you can get the types definition of your directus project via directus-extension-generate-types. The generated types.ts file can be used in your Nuxt project via the global DirectusSchema type.

1import type { CustomDirectusTypes } from "./types";
2
3type DirectusTypes =
4  | "directus_activity"
5  | "directus_collections"
6  | "directus_dashboards"
7  | "directus_fields"
8  | "directus_files"
9  | "directus_flows"
10  | "directus_folders"
11  | "directus_migrations"
12  | "directus_notifications"
13  | "directus_operations"
14  | "directus_panels"
15  | "directus_permissions"
16  | "directus_presets"
17  | "directus_relations"
18  | "directus_revisions"
19  | "directus_roles"
20  | "directus_sessions"
21  | "directus_settings"
22  | "directus_shares"
23  | "directus_translations"
24  | "directus_users"
25  | "directus_webhooks"
26  | "directus_extensions"
27  | "directus_versions";
28
29declare global {
30  interface DirectusSchema extends Omit<CustomDirectusTypes, DirectusTypes> {}
31}
32
33export {};

Graphql

The module uses nuxt-apollo for Graphql data fetching with auto refresh of access token. Please refer to docs for API usage and DX optimizations.

To use graphql subscription make sure to set:

• The module's auth mode to cookie
• WEBSOCKETS_ENABLED env variable to true
• WEBSOCKETS_GRAPHQL_ENABLED env variable to true

Auth

[!IMPORTANT]

• When SSR is enabled:
  • Directus and Nuxt apps should share the same domain name because cookies's sameSite policy is set to lax.
  • Please make sure to add NODE_OPTIONS=--dns-result-order=ipv4first env variable in order to resolve localhost domain on Node +v17.
• For SSO login with cookie mode, please make sure to set AUTH_<PROVIDER>_MODE=cookie env variable on Directus +v10.10.

The module has useDirectusAuth composable for handling authentication.

• login login with email/password and redirect to login page
• logout logout, clear states and redirect to logout page
• fetchUser call to refetch and refresh user state
• loginWithProvider login with SSO provider and redirect to login page on success and callback page otherwise
• requestPasswordReset
• resetPassword

To implement a custom logic on user login/logout events, you can use directus:loggedIn hook

1export default defineNuxtPlugin({
2  hooks: {
3    "directus:loggedIn": (state) => {},
4  },
5});

For protecting page routes, 2 possible approachs can be used:

• Globally enable and locally disable

1enableGlobalAuthMiddleware: true;

1definePageMeta({ auth: false });

• Locally enable

1definePageMeta({ middleware: "auth" }); // Redirects to login path when not loggedIn

1definePageMeta({ middleware: "guest" }); // Redirects to home path when loggedIn

License

MIT License