Nuxt UI Pro v1.0 is out with 50+ Vue components.


Easy JSON:API client integration for Nuxt

Nuxt JSON:API logo


npm version npm downloads Github Actions CI Codecov License

Easy JSON:API client integration for Nuxt.js

📖   Release Notes

Version 2.x support Nuxt 3.x.

Version 1.x supports Nuxt 2.x


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


  1. Add nuxt-jsonapi dependency to your project
yarn add nuxt-jsonapi # or npm install nuxt-jsonapi
  1. Add nuxt-jsonapi to the modules section of nuxt.config.js
  modules: [
    // Simple usage

    // With options
        baseURL: '',
        /* other module options */
  1. 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: '',
    /* 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.


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

You can access the client with:

Options API



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

    return {
      articles: data,

Composition API

const { $jsonApi } = useNuxtApp()


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

const { $jsonApi } = useNuxtApp()

const { data: articles } = await useAsyncData(() => $jsonApi.get('/article'), {
  transform: ({ data }) => 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
  • Run npm run dev:prepare to generate type stubs.
  • Use npm run dev to start playground in development mode.


MIT License

Copyright (c) Patrick Cate