nuxt-jsonapi
v2.0.4
Published
Easy JSON:API client integration for Nuxt.js
Downloads
493
Maintainers
Readme
nuxt-jsonapi
Easy JSON:API client integration for Nuxt.js
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
- Add
nuxt-jsonapi
dependency to your project
yarn add nuxt-jsonapi # or npm install nuxt-jsonapi
- Add
nuxt-jsonapi
to themodules
section ofnuxt.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 yournuxt.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
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
yarn dev
ornpm run dev
- Run automated tests using
yarn test
ornpm run test
- Run
npm run dev:prepare
to generate type stubs. - Use
npm run dev
to start playground in development mode.
License
Copyright (c) Patrick Cate