swagger2vuex

JavaScript code generator that can generate Vuex files from a Swagger file.

Install

npm i -g swagger2vuex or yarn global add swagger2vuex

Run

swagger2vuex <input_file_path> <output_file_path>

Swagger Custom Properties

x-vuex-key (String|Object)

If you want to generate the mutations, you must set a x-vuex-key property.

String

For directly assign a payload to Vuex state. The key name in state will assign a word in x-vuex-key property.

get:
  summary: Get a user by user ID
  tags:
    - users
  operationId: getUser
  responses:
    200:
      description: OK
      schema:
        $ref: "#/definitions/user"
  x-vuex-key: user

Object

For assign multiple fields in a payload to Vuex state. The key name in state and payload will assign a value and key in x-vuex-key property object.

get:
  summary: Find users
  tags:
    - users
  responses:
    200:
      description: OK
      schema:
        type: object
        properties:
          data:
            type: array
            items:
              $ref: "#/definitions/user"
          total:
            type: integer
            format: int64
  x-vuex-key:
    data: users
    total: usersTotalCount

Example

swagger2vuex ./docs/swagger.yml ./src/dist.js

./docs/swagger.yml

---
swagger: "2.0"
info:
  description: APIs for testing
  title: Test APIs
  version: 1.0.0
consumes:
- application/json
produces:
- application/json
schemes:
- http
- https
basePath: /v2
definitions:
  role:
    type: string
    enum:
      - admin
      - staff
      - visitor
  user:
    type: object
    required:
      - name
    properties:
      id:
        type: integer
        format: int64
        readOnly: true
      name:
        type: string
      age:
        type: integer
        format: int32
paths:
  /users:
    get:
      summary: Find users
      tags:
        - users
      operationId: findUsers
      parameters:
        - name: keyword
          in: query
          type: string
        - name: sort
          in: query
          type: string
          enum: ["+id", "-id"]
        - name: perpage
          in: query
          type: integer
          format: int32
      responses:
        200:
          description: OK
          schema:
            type: object
            properties:
              data:
                type: array
                items:
                  $ref: "#/definitions/user"
              total:
                type: integer
                format: int64
      x-vuex-key:
        data: users
    post:
      summary: Add a user
      tags:
        - users
      operationId: addUser
      parameters:
        - name: body
          in: body
          schema:
            $ref: "#/definitions/user"
      responses:
        201:
          description: Created
          schema:
            $ref: "#/definitions/user"
  /user/{id}:
    parameters:
      - type: integer
        format: int64
        name: id
        in: path
        required: true
    get:
      summary: Get a user by user ID
      tags:
        - users
      operationId: getUser
      responses:
        200:
          description: OK
          schema:
            type: object
            properties:
              data:
                $ref: "#/definitions/user"
      x-vuex-key:
        data: user
    put:
      summary: Update a user by user ID
      tags:
        - users
      operationId: updateUser
      parameters:
        - name: body
          in: body
          schema:
            $ref: "#/definitions/user"
      responses:
        200:
          description: OK
          schema:
            $ref: "#/definitions/user"
      x-vuex-key:
        data: user
    delete:
      summary: Delete a user by user ID
      tags:
        - users
      operationId: deleteUser
      responses:
        204:
          description: Deleted

./src/APIActions.js (Generated by swagger2vuex)

export const types = [
  'GET_V2_USERS',
  'POST_V2_USERS',
  'GET_V2_USER_BY_ID',
  'PUT_V2_USER_BY_ID',
  'DELETE_V2_USER_BY_ID',
].reduce(function(obj, val){ return Object.assign(obj, {[val]: val}) }, {})

export let ajax = {}
export function init (a) { ajax = a }

export function getV2Users (context, query) {
  return ajax.get(`/v2/users`, {params: query})
    .then(function(res){
      context.commit(types.GET_V2_USERS, res.data)
      return res.data
    })
}
export function postV2Users (context, body) {
  return ajax.post(`/v2/users`, body)
    .then(function(res){
      context.commit(types.POST_V2_USERS, res.data)
      return res.data
    })
}
export function getV2UserById (context, id) {
  return ajax.get(`/v2/user/${id}`)
    .then(function(res){
      context.commit(types.GET_V2_USER_BY_ID, res.data)
      return res.data
    })
}
export function putV2UserById (context, id, body) {
  return ajax.put(`/v2/user/${id}`, body)
    .then(function(res){
      context.commit(types.PUT_V2_USER_BY_ID, res.data)
      return res.data
    })
}
export function deleteV2UserById (context, id) {
  return ajax.delete(`/v2/user/${id}`)
    .then(function(res){
      context.commit(types.DELETE_V2_USER_BY_ID, res.data)
      return res.data
    })
}

export const mutations = {
  [types.GET_V2_USERS]: function (state, payload) {
    state.users = payload['data']
    state.usersTotalCount = payload['total']
  },
  [types.GET_V2_USER_BY_ID]: function (state, payload) {
    state.user = payload['data']
  },
  [types.PUT_V2_USER_BY_ID]: function (state, payload) {
    state.user = payload['data']
  },
}

./src/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import * as APIActions from './APIActions'

APIActions.init(axios)
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {},
  APIActions,
})