@nhost/nuxt

@nhost/nuxt

Nuxt.js wrapper for nhost-js-sdk.

Installation

First install the package:

npm install --save @nhost/nuxt

or using Yarn:

yarn add @nhost/nuxt

Then, add it to your Nuxt config modules.

{
  modules: ["@nhost/nuxt"];
}

You can configure it like so:

{
  modules: [
    '@nhost/nuxt'
  ],
  nhost: {
    baseURL: "https://backend-url.nhost.app"
    // Your options go here
  }
}

To check out all the available options, check our documentation.

Middleware

We provide middleware that automatically handles auth guards for your convenience. To enable it, follow the below steps:

• Add nhost/auth to your Nuxt config middleware:

{
  router {
    middleware: ['nhost/auth']
  }
}

• Define the home and logout routes on the nhost config

{
  nhost: {
    routes: {
      home: '/dashboard',
      logout: '/'
    }
  }
}

Users who attempt to access auth guarded pages without being logged in will be redirected to the logout route and users who are logged in and attempt to access guest pages will be redirected to the home route.

These routes can also be set to either undefined or false which will disable their respective functionality. They are also available under this.$nhost.$options.routes on Vue components or ctx.$nhost.$options.routes on the Nuxt Context.

• Finally, add an nhostAuth property to your Nuxt pages:

export default {
  nhostAuth: true,
};

This property takes the following values:

• true: User has to be authenticated to access this page. Users who are logged out will be redirected to the logout route.
• false: This is the default value; no authentication required.
• 'guest': This page can only be accessed by unauthenticated users. Users who have logged in will be redirected to the home route.

Typescript

If you're using Typescript, make sure to include @nhost/nuxt to your Typescript config types:

{
  compilerOptions: {
    types: ["@nhost/nuxt"];
  }
}

Usage

Exposes an $nhost property on the Vue object and on the Nuxt Context which is an instance of NHostClient