vanling / nuxt-directus

Directus sdk for Nuxt 3

Nuxt Directus

Directus SDK for Nuxt 3

IMPORTANT

This version 2 is a complete rewrite of the module. You can find the old version aka v1 under version-1 branch.

• ✔️ 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 access token and auto redirection.
• ✔️ Ready to use starter

Installation

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

# Using pnpm
pnpm install --save-dev @bg-dev/nuxt-directus

# Using yarn
yarn add --dev @bg-dev/nuxt-directus

Setup

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

export default defineNuxtConfig({
  modules: ["@bg-dev/nuxt-directus"],

  directus: {
    rest: {
      baseUrl: "http://127.0.0.1:8055", // Directus app base url
      nuxtBaseUrl: "http://127.0.0.1:3000", // Nuxt app base url
    },
    graphql: {
      enabled: true,
      httpEndpoint: "http://127.0.0.1:8055/graphql",
      wsEndpoint: "", // Omit to disable Websockets
    },
    auth: {
      enabled: true,
      enableGlobalAuthMiddleware: false, // Enable auth middleware on every page
      refreshTokenCookieName: "directus_refresh_token",
      accessTokenCookieName: "directus_access_token",
      msRefreshBeforeExpires: 3000,
      redirect: {
        login: "/auth/login", // Path to redirect when login is required
        logout: "/auth/login", // Path to redirect after logout
        home: "/home", // Path to redirect after successful login
        resetPassword: "/auth/reset-password", // Path to redirect for password reset
        callback: "/auth/callback", // Path to redirect after login with provider
      },
    },
  },
});

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 global.d.ts file.

import { CustomDirectusTypes } from "./types";

declare global {
  interface DirectusSchema extends CustomDirectusTypes {}
}

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

• WEBSOCKETS_ENABLED env to true
• WEBSOCKETS_GRAPHQL_ENABLED env to true

Auth

The module has useDirectusAuth composable for handling authentication with cookie based storage. It expose these methods

• login login with email/password and redirect to login page
• logout logout, clear storage 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
• getToken get a fresh access token means it will be refreshed on expiration
• requestPasswordReset
• resetPassword

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

• Globally enable and locally disable

enableGlobalAuthMiddleware: true;

definePageMeta({ auth: false });

• Locally enable

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

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

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

MIT License