nuxt-jsonapi

Easy JSON:API client integration for Nuxt.js

📖   Release Notes

Version 2.x support Nuxt 3.x.

Version 1.x supports Nuxt 2.x

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 (options API) or const { $jsonApi } = useNuxtApp() (composition API).

Setup

1. Add nuxt-jsonapi dependency to your project

npm run 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 */
  },
}

❗ 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 with:

Options API

this.$jsonApi

Example:

export default defineNuxtComponent({
  async asyncData({ $jsonApi }) {
    const { data } = await $jsonApi.get('/article')

    return {
      articles: data,
    }
  },
})

Composition API

const { $jsonApi } = useNuxtApp()

Example:

<script setup>
import { useNuxtApp, useAsyncData } from '#app'

const { $jsonApi } = useNuxtApp()

const { data: articles } = await useAsyncData(() => $jsonApi.get('/article'), {
  transform: ({ data }) => data,
})
</script>

Development

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

• Run npm run dev:prepare to generate type stubs.
• Use npm run dev to start playground in development mode.

License

MIT License

Copyright (c) Patrick Cate