preface

Koa is the Express team developing the next generation of Node Web application development framework. When you use Koa to develop your Web application, one important thing must be — how do I render my view?

Many people think, that is not easy, choose a template engine, and then find the corresponding Koa middleware to support the engine. The answer is, you can also find a bunch of middleware like the following:

Picture description

But have you ever thought about using Vue’s syntax directly with rendering your views? So you look for a lot of places, you don’t necessarily find a good solution, find more may be Vue SSR integration scheme up, but that has a lot of trouble, its better use scenario is front end isomorphism development;

Now you just want to keep it simple and want Vue’s syntax and some of its other core features, such as componentification, directives, filters, etc. Is there such an off-the-shelf Koa middleware?

Have!!!!!!

Appropriate middleware

It is because I have the above requirements and have not found a similar solution, so I encapsulated a Koa middleware based on Vue’s server-side rendering scheme, which can realize all the above requirements. Her address:

Github.com/imingyu/koa…

You can check the Test folder in the Git repository, which involves the unit tests of the requirements of the scenario, and all of them have passed, so you can safely use them

This middleware currently supports Koa2 version, and I will update it recently to make it also support Koa1.

The installation

npm i -S koa-vue-viewCopy the code

use

<! /views/ master.vue -->
<template>
    <html lang="zh-CN">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>{{hight(app.name)}} - {{app.version}}</title>
        <slot name="meta"></slot>
    </head>

    <body>
        <h1>{{layoutName}} - {{layoutVersion}}</h1>
        <slot name="top"></slot>
        <slot></slot>
        <slot name="bottom"></slot>
    </body>

    </html>
</template>

<! -- component:./components/ age.vue -->
<template>
    <strong style="color:red;">
        <slot></slot>
    </strong>
</template>


<! -- page:./views/ user.vue -->
<template>
    <Master>
        <ul>
            <li v-for="(item,index) in users" :key="index">{{item.name}} <Age>{{ add(item.age, 1) }}</Age></li>
        </ul>
    </Master>
</template>Copy the code
var path = require('path');
var Koa = require('koa');
var VueView = require('koa-vue-view');

var app = new Koa();
app.use(VueView({
    methodName: 'render'.// Register the method name of the render view in KOA CTX, default render
    data: {
        _: require('lodash'),
        app: {
            name: 'Github'.version: '1.0.0'}},methods: {
        add(a, b) {
            returna + b; }},components: {
        Master: {
            path: path.resolve(__dirname, './views/Master.vue'),
            data() {
                this.layoutVersion = '1.0.0';
                return {
                    layoutName: 'master'}},methods: {
                hight(str) {
                    return ` * * *${str}* * * `; }}},Age: path.resolve(__dirname, './components/Age.vue')}})); app.use(ctx= > {
    ctx.state.users = [{
        name: 'Tom'.age: 20
    }, {
        name: 'Alice'.age: 18
    }];
    ctx.render(path.resolve(__dirname, './views/User.vue'));
    Render ({path:path.resolve(__dirname, './views/ user.vue '), data(){return {name:'Github'}}, methods:{ show(){} } }); * /
})


app.listen(8200);Copy the code

After running the above code, you’ll see, wow! You can have fun in Koa view Vue, oh yeah!