Vue-backend-block NPM

vue-backend-block

webpack loader and plugin for Vue Single-File Components use Custom Blocks as backend part

What is vue-backend-block?

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.

Installing vue-backend-block:

npm i vue-backend-block

Webpack plugin configuration

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

Webpack loader configuration

rules: [
    {
        resourceQuery: /blockType=backend/,
        loader: 'vue-backend-block'
    },
],

where blockType=backend - backend name of your custom block

What does the template contain (backend_template option)

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}}*/

Sample content of the single-file component vuejs
<template>

            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();
        }
    });