@pnodev/nuxt-directus

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>