Easy JSON:API client integration for Nuxt.js
npm install nuxt-jsonapi[![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href]  [![Codecov][codecov-src]][codecov-href] [![License][license-src]][license-href]
> Easy JSON:API client integration for Nuxt.js
Version 2.x and 3.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
``bash`
npm install nuxt-jsonapi
2. Add nuxt-jsonapi to the modules section of nuxt.config.js
`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:
`js
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 with:
`js`
this.$jsonApi
Example:
`js
export default defineNuxtComponent({
async asyncData({ $jsonApi }) {
const { data } = await $jsonApi.get('/article')
return {
articles: data,
}
},
})
`
`js`
const { $jsonApi } = useNuxtApp()
Example:
`vue`
1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using or npm run dev
4. Run automated tests using or npm run test
- Run npm run dev:prepare to generate type stubs.npm run dev` to start playground in development mode.
- Use
Copyright (c) Patrick Cate
[npm-version-src]: https://img.shields.io/npm/v/nuxt-jsonapi/latest.svg
[npm-version-href]: https://npmjs.com/package/nuxt-jsonapi
[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-jsonapi.svg
[npm-downloads-href]: https://npmjs.com/package/nuxt-jsonapi
[github-actions-ci-src]: https://github.com/patrickcate/nuxt-jsonapi/workflows/ci/badge.svg
[github-actions-ci-href]: https://github.com/patrickcate/nuxt-jsonapi/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/github/patrickcate/nuxt-jsonapi.svg
[codecov-href]: https://codecov.io/gh/patrickcate/nuxt-jsonapi
[license-src]: https://img.shields.io/npm/l/nuxt-jsonapi.svg
[license-href]: https://npmjs.com/package/nuxt-jsonapi