{"id":24955152,"url":"https://github.com/nullnull/nuxt-resource-based-api","last_synced_at":"2026-02-04T03:05:26.433Z","repository":{"id":44070142,"uuid":"209940758","full_name":"nullnull/nuxt-resource-based-api","owner":"nullnull","description":"Provide extremely efficient way to handle API on Nuxt.js.","archived":false,"fork":false,"pushed_at":"2023-01-04T22:01:55.000Z","size":1988,"stargazers_count":3,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T06:03:16.293Z","etag":null,"topics":["nuxtjs","vuex"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nullnull.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-21T07:05:11.000Z","updated_at":"2021-05-17T04:43:22.000Z","dependencies_parsed_at":"2023-02-02T21:15:44.186Z","dependency_job_id":null,"html_url":"https://github.com/nullnull/nuxt-resource-based-api","commit_stats":null,"previous_names":["nullnull/vuex-resource-based-api"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullnull%2Fnuxt-resource-based-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullnull%2Fnuxt-resource-based-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullnull%2Fnuxt-resource-based-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullnull%2Fnuxt-resource-based-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nullnull","download_url":"https://codeload.github.com/nullnull/nuxt-resource-based-api/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248262421,"owners_count":21074306,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxtjs","vuex"],"created_at":"2025-02-03T05:40:12.683Z","updated_at":"2026-02-04T03:05:26.407Z","avatar_url":"https://github.com/nullnull.png","language":"TypeScript","readme":"# nuxt-resource-based-api\n[![npm version](https://badge.fury.io/js/nuxt-resource-based-api.svg)](https://badge.fury.io/js/nuxt-resource-based-api)\n[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)\n[![CircleCI](https://circleci.com/gh/nullnull/nuxt-resource-based-api.svg?style=svg)](https://circleci.com/gh/nullnull/nuxt-resource-based-api)\n\nThis library provide extremely efficient way to handle API which has resource based routing (like Ruby on Rails) on Nuxt.js.\nYou can implement vuex stores and vue components with simple and DRY code.\n\n## Overview\nLet's assume you want to develop a task management service, and you've already developed API server.\n\nWith this library, you can implement state/mutations/actions by following simple code.\n\n\n**store/index.js**\n```js\nimport Napi from 'nuxt-resource-based-api'\nimport axios from 'axios'\n\nconst axiosInstance = axios.create({\n  baseURL: 'https://api.awesome-task-manager.com'\n})\n\nNapi.setConfig({\n  axios: axiosInstance\n})\n```\n\n**store/task.js**\n\n```js\nimport Napi from 'nuxt-resource-based-api'\n\nexport const { state, mutations, actions } = Napi.createStore(\n  'task',\n  ['index', 'show', 'new', 'edit', 'destroy'],\n)\n```\n\nThat's it! And in addition to creating vuex store, you can create vue component.\n\n**lib/create_component.js**\n\n```js\nimport Vue from 'vue'\nimport Napi from 'nuxt-resource-based-api'\n\nexport default function createComponent(resources) {\n  return Vue.extend({\n    fetch: Napi.generateFetch(resources),\n    computed: Napi.generateComputed(resources)\n    methods: Napi.generateMethods(resources)\n  })\n}\n```\n\n**pages/index.vue**\n\n```html\n\u003cscript\u003e\nimport createComponent from '@/lib/create_component'\n\nexport default createComponent([\n  { resource: 'task', action: 'index' },\n]).extend({ // you can define other option by using Vue.extend method\n  methods: {\n    foo() { return 1 }\n  }\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n\u003cdiv\u003e\n  \u003cdiv class=\"task\" v-for=\"task in tasks\"\u003e\n    {{ task.name }}\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/template\u003e\n```\n\nBy using `createComponent` function, you can omit boring `fetch` and `mapState` implementation and keep your source code simple. This is syntax sugar of following.\n\n```js\n// you can implement these callbakcks in configuration step\nconst createHeaders = (context) =\u003e { return {} }\nconst errorHandler = (e, context) =\u003e {}\n\nexport default Vue.extend({\n  fetch(context) {\n    const headers = createHeaders(context)\n    const { store } = context\n    try {\n      await store.dispatch('task/fetchTasks', { headers }) // send a request (GET https://api.awesome-task-manager.com/tasks) and store the response\n    } catch (e) {\n      errorHandler(e, context)\n    }\n  },\n  computed: {\n    tasks() {\n      return this.$store.state.task.tasks\n    }\n  },\n  methods: {\n    fetchTasks(force = false) {\n      const headers = createHeaders(this)\n      try {\n        await store.dispatch('task/fetchTasks', { headers, force })\n      } catch(e) {\n        errorHandler(e, this)\n      }\n    },\n    foo() { return 1 }\n  }\n})\n```\n\nIf you want to implement a page to create task, write following code.\n\n**pages/tasks/new.vue**\n\n```html\n\u003cscript\u003e\nimport createComponent from '@/lib/create_component'\n\nexport default createComponent([\n  { resource: 'task', action: 'create' },\n]).extend({\n  data() {\n    return {\n      title: '',\n      body: '',\n    }\n  },\n  methods: {\n    async create() {\n      await this.createTask({\n        title: this.title,\n        body: this.body\n      })\n    }\n  }\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n\u003c!-- ... --\u003e\n\u003c/template\u003e\n```\n\n[See other examples in Wiki](https://github.com/nullnull/nuxt-resource-based-api/wiki/Examples).\n\n\n## Installation\n```js\nnpm install nuxt-resource-based-api\n```\n\nAs minimum configuration, all you need to do just add following code.\n\n```js\n// store/index.js\nimport Napi from 'nuxt-resource-based-api'\nimport axios from 'axios'\n\nconst axiosInstance = axios.create({\n  baseURL: 'https://api.awesome-task-manager.com'\n})\n\nNapi.setConfig({\n  axios: axiosInstance\n})\n```\n\n```js\n// lib/create_component.js\nimport Vue from 'vue'\nimport Napi from 'nuxt-resource-based-api'\n\nexport default function createComponent(resources) {\n  return Vue.extend({\n    fetch: Napi.generateFetch(resources),\n    computed: Napi.generateComputed(resources)\n    methods: Napi.generateMethods(resources)\n  })\n}\n```\n\nYou can also customize request handler, error handler and so on. [Please see Wiki](https://github.com/nullnull/nuxt-resource-based-api/wiki/Configuration)\n\n# Typescript Support\nUnfortunately Typescript is incompatible to dynamic generating codes like this library.\n\nBut you can use typescript with some trick and we recommend to use typescript. See [Wiki](https://github.com/nullnull/nuxt-resource-based-api/wiki/Typescript-support) for details.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullnull%2Fnuxt-resource-based-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnullnull%2Fnuxt-resource-based-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullnull%2Fnuxt-resource-based-api/lists"}