https://github.com/chenweiqun/swagger-vue

Swagger to JS & Vue & Axios Codegen
https://github.com/chenweiqun/swagger-vue

axios codegen swagger vue

Last synced: 3 months ago
JSON representation

Swagger to JS & Vue & Axios Codegen

• Host: GitHub
• URL: https://github.com/chenweiqun/swagger-vue
• Owner: chenweiqun
• License: mit
• Created: 2017-03-31T06:17:00.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2020-04-23T07:33:17.000Z (almost 5 years ago)
• Last Synced: 2024-12-01T07:45:15.121Z (3 months ago)
• Topics: axios, codegen, swagger, vue
• Language: JavaScript
• Size: 38.1 KB
• Stars: 173
• Watchers: 4
• Forks: 62
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# swagger-vue

Swagger to JS & Vue & Axios Codegen

# Installation

```shell

npm install swagger-vue --dev

```

# Generate

## Using NodeJS file

```javascript

const swaggerGen = require('swagger-vue')

const jsonData = require('../api-docs.json')

const fs = require('fs')

const path = require('path')

let opt = {

  swagger: jsonData,

  moduleName: 'api',

  className: 'api'

}

const codeResult = swaggerGen(opt)

fs.writeFileSync(path.join(__dirname, '../dist/api.js'), codeResult)

```

## Using Grunt task

Create **Gruntfile.js**

```javascript

const fs = require('fs')

const path = require('path')

const swaggerGen = require('swagger-vue')

module.exports = function(grunt) {

  grunt.initConfig({

    'pkg': grunt.file.readJSON('package.json'),

    'swagger-vue-codegen': {

      options: {

        swagger: "<%= pkg.swagger.definition %>",

        className: "<%= pkg.swagger.className %>",

        moduleName: "vue-<%= pkg.swagger.moduleName %>",

        dest: 'client/javascript'

      },

      dist: {

      }

    }

  });

  grunt.registerMultiTask('swagger-vue-codegen', function() {

    var callback = this.async();

    var opt = this.options();

    var distFileName = path.join(opt.dest, opt.moduleName + '.js');

    fs.readFile(opt.swagger, function(err, data) {

      if (err) {

        grunt.log.error(err.toString());

        callback(false);

      } else {

        var parsedData = JSON.parse(data);

        var codeResult = swaggerGen({

          swagger: parsedData,

          moduleName: opt.moduleName,

          className: opt.className

        });

        fs.writeFile(distFileName, codeResult, function(err) {

          if (err) {

            grunt.log.error(err.toString());

            callback(false);

          } else {

            grunt.log.writeln('Generated ' + distFileName + ' from ' + opt.swagger);

          }

        })

      }

    });

  });

  grunt.registerTask('vue', ['swagger-vue-codegen']);

};

```

And set options in package.json

```json

...

  "swagger": {

    "definition": "client/swagger.json",

    "className": "API",

    "moduleName": "api-client"

  }

...

```

Now you can use `grunt vue` to run build task

# Generated client usage

In Vue.js main file set API domain

```javascript

import { setDomain } from './lib/api-client.js'

setDomain('http://localhost:3000/api')

```

Import API function into Vue.js component, for example to log in

```javascript

import { user_login as userLogin } from '../lib/api-client.js'

userLogin({

  credentials: {

    username: 'admin',

    password: 'admin'

  }

}).then(function (response) {

  console.log(response.data) // {id: "", ttl: 1209600, created: "2017-01-01T00:00:00.000Z", userId: 1}

})

```

All requests use **axios** module with promise, for more information about that follow axios documentation 

# Links

 - [swagger-js-codegen](https://github.com/wcandillon/swagger-js-codegen)

 - [axios](https://www.npmjs.com/package/axios)

# License

[MIT](https://opensource.org/licenses/MIT)