Need help with swagger-vue?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

chenweiqun
156 Stars 56 Forks MIT License 27 Commits 10 Opened issues

Description

Swagger to JS & Vue & Axios Codegen

Services available

!
?

Need anything else?

Contributors list

# 267,032
Vue.js
JavaScr...
axios
swagger
11 commits
# 93,203
HTML
Less
electro...
shopify
2 commits
# 53,228
Go
golang
Vue.js
axios
1 commit
# 351,592
Vue.js
axios
swagger
HTML
1 commit
# 480,396
Vue.js
JavaScr...
axios
swagger
1 commit
# 484,321
Vue.js
JavaScr...
axios
swagger
1 commit
# 468,062
Vue.js
JavaScr...
axios
swagger
1 commit

swagger-vue

Swagger to JS & Vue & Axios Codegen

Installation

npm install swagger-vue --dev

Generate

Using NodeJS file

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

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.