nuxt-jsonapi

Easy JSON:API client integration for Nuxt.js

Introduction

nuxt-jsonapi adds easy JSON:API client integration to Nuxt. It is a loose wrapper around the excellent Kitsu JSON:API client.

This module globally injects a $jsonApi instance you can use to access the client anywhere using this.$jsonApi. For plugins, asyncData, fetch, nuxtServerInit and Middleware, you can access it from context.$jsonApi.

Setup

Add nuxt-jsonapi dependency to your project

yarn add nuxt-jsonapi # or npm install nuxt-jsonapi

Add nuxt-jsonapi to the modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    'nuxt-jsonapi',

    // With options
    [
      'nuxt-jsonapi',
      {
        baseURL: 'http://www.example.com/api'
        /* other module options */
      }
    ]
  ]
}

If you didn't pass options with step #2, add a jsonApi object to your nuxt.config.js to configure module options:

export default {
  modules: ['nuxt-jsonapi'],

  jsonApi: {
    baseURL: 'http://www.example.com/api'
    /* other module options */
  }
}

❗ Important

If you do not specify a baseURL option, a default /jsonapi URL will be used. This is almost certainly not what you want so be sure it is set correctly.

Usage

Refer to Kitsu's excellent documentation for all the feature's the client offers.

You can access the client through this.$jsonApi or context.$jsonApi.

Example:

async fetch() {
    this.articles = await this.$jsonApi.get('/article').then(articles => {
      return articles.data
    })
  }

Development

Clone this repository
Install dependencies using yarn install or npm install
Start development server using yarn dev or npm run dev
Run automated tests using yarn test or npm run test

License

MIT License