@nhost/nuxt

@nhost/nuxt

Use Nhost with NuxtJS

Installation

Using NPM:

$ npm install --save @nhost/nuxt

or using Yarn:

$ yarn add @nhost/nuxt

Add module and configure nhost in nuxt.config.js:

{
  modules: [
    '@nhost/nuxt'
  ],
  nhost: {
    baseURL: "https://backend-REPLACE.nhost.app"
    // optional other nhost-js-sdk setup options
  }
}

Check out our documentation for all the available nhost-js-sdk options.

Middleware

We provide middleware that automatically handles auth guards to protect pages.

• 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 gets redirected to the logout route, and users who are logged in and attempt to access guest pages gets 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,
};

nhostAuth takes the following values:

• true: Users must be authenticated to access this page. If the user is not authenticated, the user gets 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 are 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"];
  }
}

Nuxt-apollo

To use this library with nuxt-apollo, create two Nuxt plugins: nuxt-apollo-config.js and nhost-apollo-ws-client.js inside your plugins folder with the following content:

nuxt-apollo-config.js

export default (ctx) => {
  return {
    httpEndpoint: "https://hasura-<REPLACE>.nhost.app/v1/graphql",
    wsEndpoint: "wss://hasura-<REPLACE>.nhost.app/v1/graphql",
    getAuth: () => {
      const token = ctx.$nhost.auth.getJWTToken();
      return token ? `Bearer ${token}` : null;
    },
  };
};

nhost-apollo-ws-client.js

export default (ctx) => {
  const subscriptionClient = ctx.app.apolloProvider.defaultClient.wsClient;

  ctx.$nhost.auth.onAuthStateChanged((state) => {
    if (subscriptionClient.status === 1) {
      subscriptionClient.close();
      subscriptionClient.tryReconnect();
    }
  });

  ctx.$nhost.auth.onTokenChanged(() => {
    if (subscriptionClient.status === 1) {
      subscriptionClient.tryReconnect();
    }
  });
};

Then, in your Nuxt config:

{
  [...]
  "plugins": [
    {
      "src": "~/plugins/nhost-apollo-ws-client.js",
      "mode": "client"
    }
  ],
  "apollo": {
    "clientConfigs": {
      "default": "~/plugins/nhost-apollo-config.js"
    }
  },
  [...]
}

Usage

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

Example

You can find an example project with this library and nuxt-apollo here