Easy JSON:API client integration for Nuxt.js

📖   Release Notes

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.

1. Add nuxt-jsonapi dependency to your project

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

2. 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 */
      }
    ]
  ]
}

3. 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 */
  }
}

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.

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

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using yarn dev or npm run dev
4. Run automated tests using yarn test or npm run test

MIT License

Copyright (c) Patrick Cate