webpack loader and plugin for Vue Single-File Components use Custom Blocks as backend part
vue-backend-block
is a loader and plugin that allows you to embed part of your backend logically connected to the single-file component in a separate block. Learn more about custom blocks.
npm i vue-backend-block
- import plugin:
const vue_backend_block = require("vue-backend-block/plugin.js");
- configure plugin:
plugins: [
new vue_backend_block ({
backend_template: path.join(__dirname, "web_server_template.js"),
backend_output: path.join(__dirname, "services", "web_server.js"),
}),
]
options name | type | default | example | description |
---|---|---|---|---|
backend_template | string | - | './web_server_template.js' | Backend pattern path |
backend_output | string | - | './web_server.js' | Assembled backend from custom block .vue |
rules: [
{
resourceQuery: /blockType=backend/,
loader: 'vue-backend-block'
},
],
where blockType=backend
- backend name of your custom block
- Sample template:
const WEB_PORT = 314;
const Koa = require('koa');
var Router = require('koa-router');
const app = new Koa();
var router = new Router();
app
.use(router.routes())
.use(router.allowedMethods());
const body = require('koa-json-body')({ limit: '10kb' });
app.listen(WEB_PORT);
app.context.db = require('../lib/db.js');
/*{{endpoints}}*/
All parts from Custom Blocks will be inserted instead of: /*{{endpoints}}*/
<template>
</template>
<script>
export default {
name: 'example',
data() {
return {
}
},
methods:{
}
}
</script>
<style>
</style>
<backend>
router
.post('/reg/', body, async (ctx, next) => {
try {
let r = ctx.request.body;
console.log(ctx.request.body.name);
await ctx.db.getConnection();
ctx.body = await ctx.db.db_query(`CALL users_reg('${r.name}', '${r.last_name}', '${r.mail}', '${r.pass}')`);
} catch (err) {
throw err;
} finally {
await ctx.db.end();
}
});
</backend>
By default, syntax highlighting in Custom Blocks in PhpShtorm does not work. In order for everything to work, you need to do the following:
File -> Settings -> In the search box, type: injections
Add new Specify ID and local name
After these settings you should have something similar.