TypeScript icon, indicating that this package has built-in type declarations

0.1.5 • Public • Published

Nuxt Directus

npm version npm downloads License Nuxt

A Nuxt 3 module for integrating the official Directus JS SDK into your Nuxt 3 project


  • ✔️ Customized Transport & Storage for Nuxt 3
  • ✔️ Handles authentication via useDirectusAuth composable
  • ✔️ Provides auth route middlewares
  • ✔️ Auto refresh of access token
  • ✔️ Exposes directus instance via useDirectus composable
  • ✔️ Typescript support


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

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

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


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: {
    baseUrl: "", // Directus app base url
    nuxtBaseUrl: "", // Nuxt app base url
    auth: {
      enabled: false,
      enableGlobalAuthMiddleware: false, // Enable auth middleware on every page
      userFields: [], // Select user fields 
      refreshTokenCookieName: "directus_refresh_token",
      defaultRoleId: "", // Role id assigned for new registered users
      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


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 {
  type MyDirectusTypes = CustomDirectusTypes;


Refer to Directus SDK for api documentation.

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


  • When auth is enabled, Directus and Nuxt apps SHOULD share the same domain name because cookies's sameSite policy is set to lax, in development domain SHOULD be (issue)
  • Refer to directus docs for general configuration


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


MIT License


npm i @bg-dev/nuxt-directus

DownloadsWeekly Downloads






Unpacked Size

22.4 kB

Total Files


Last publish


  • bg-org