fbpx

Vue integration

Find out how to integrate JSQL with Vue

Stack requirements

The JSQL will not work with Vue without an account in the JSQL cloud, a backend application (API) integrated with JSQL and integration with the tasks of the runner. To learn more see overview.

Axios or Superagent module installation

Install JSQL Superagent or Axios plugin to your project

npm install jsql-superagent

or

npm install jsql-axios

Import modules

Import JSQL Superagent or Axios plugin in your JavaScript file:

import JsqlService from 'jsql-superagent';

or

import JsqlService from 'jsql-axios';

Usage

First of all, you need to initiate JSQL object:

let jsqlService = new JsqlService({
 host: 'https://mysite.com/'
});

You can also pass additional configuration parameters.

 

Then let’s add jsql instance into state:

this.jsql = jsqlService.getInstance();

Finally, we can use JSQL:

this.jsql.delete('@sql delete from person where age = :age')
.param('age', 30)
.then((res) => {
   console.log(res);
}).catch((e) => {
   console.log(e);
});

For details on using other methods like delete, update, insert and binding parameters, see the documentation.

Example integration with Vue and JSQL CLI in package.json

This example needs concurrently module to be installed.

This example needs Disable hashing for development mode option enabled in security options.

"scripts": {
  "serve": "concurrently --kill-others \"vue-cli-service serve\" \"npm run jsql-watch\"",
  "jsql-watch": "jsql-cli --apiKey=(..) --input=/src/**/*.* --extensions=js,vue --watch",
  "jsql-build": "jsql-cli --apiKey=(..) --devKey=(..) --output=/dist/js/app.js --input=/dist/js/app.js",
  "build": "vue-cli-service build && npm run jsql-build"
}
Close Menu