0.2.0 • Public • Published


    A Nuxt module for integrating the Directus API (including an authentication middleware)

    MIT license NPM version Prettier

    Who is this for?

    This module integrates the Directus API into your Nuxt project and exposes the Directus JavaScript SDK under $directus. Furthermore, it comes with a complete, ready-to-use authentication middleware that requires minimal configuration. If you are looking for a ready-to-use solution for using Nuxt with Directus, this might be for you.


    ⚠️  Please note: In order for this module to work, you also need to install cookie-universal-nuxt and to have an activated Vuex Store.

    npm install --save @pnodev/nuxt-directus # or yarn add @pnodev/nuxt-directus


    After installing the module, you need to add it to your module-array in nuxt.config.js. You have to make sure, that @pnodev/nuxt-directus is specified before 'cookie-universal-nuxt'.

    // nuxt.config.js
    modules: [

    To get started, you only need to specify your apiUrl:

    // nuxt.config.js
    directus: {
      apiUrl: 'https://api.acme.net',

    If you want to use the authentication-middleware, add it e.g. to your router like this:

    // nuxt.config.js
    router: {
      middleware: ['auth'],

    Advanced Configuration Options

    // nuxt.config.js
    directus: {
      apiUrl: 'https://api.acme.net', // your API URL
      accessTokenCookieName: 'directus_access_token', // the name of the cookie the access_token will be saved in
      refreshTokenCookieName: 'directus_refresh_token', // the name of the cookie the refresh_token will be saved in
      loginRoute: '/login', // the route containing your login-form
      homeRoute: '/', // the route the user will be redirected to after authentication
      hideLoginWhenAuthenticated: true, // when set to true, authenticated users will be redirected to homeRoute, when accessing loginRoute


    This module will expose two new APIs on your context object: $directus and $auth.


    You can directly access a pre-configured instance of the Directus SDK through this.$directus.


    The $auth-object gives you access to a couple of methods that you can use to implement your authentication logic. Please note that all of these methods are async and will return a Promise.


    Call this method with your user's credentials. It will perform the login in against your API and store access_token and refresh_token for you. It will also take care of automatically requesting new tokens, before your access_token is about to expire. After a successful authentication, the user will be redirected to homeRoute. If the authentication is not successful, the method will throw an error.

    // example login implementation
    async login() {
      try {
        await this.$auth.login({
          email: this.email,
          password: this.password,
      } catch (error) {
        if (error.message === 'Authentication Failure') {
          error.data.forEach((err) => {
            this.errorMessage += err.message;


    This method will invalidate your current tokens and delete the token-cookies.


    If for some reason you need to manually refresh the stored tokens, you can use this method to do so. It will request a new set of tokens and adjust the refresh-interval accordingly.


    nuxt-directus retrieves the user-object after login and stores it in vuex. To get a reference to the current user, you can use this getter (will return null, if no user is logged in).

    <div v-if="$auth.user">
      <p>Some secret stuff</p>
    <div v-else>
      <p>Public stuff</p>


    npm i @pnodev/nuxt-directus

    DownloadsWeekly Downloads






    Unpacked Size

    13.3 kB

    Total Files


    Last publish


    • avatar