nuxt-directus

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

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.

Installation

⚠️  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

Configuration

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: [
  '@pnodev/nuxt-directus',
  'cookie-universal-nuxt',
],

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
}

Usage

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

$directus

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

$auth

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.

$auth.login(credentials)

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;
      });
    }
  }
},

$auth.logout()

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

$auth.refresh()

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.

$auth.user

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>
<div v-else>
  <p>Public stuff</p>
</div>