we-demo / vue-server-demo

"Vue" is a language.

vue-server-demo

"Vue is a language."

• koa
• router
• api (method, url, use)
• listen (port)
• vue ssr
• websocket
• more...

/
└─ ServerApp
   └─ src/
      ├─ components/
      ├─ index.js
      ├─ main.js
      ├─ server.vue
      └─ setup.js
   ├─ .babelrc
   └─ package.json

# npm run dev
nodemon . -e js,json,vue

# npm start
cross-env=production node .

// main.js
import Vue from 'vue'
import VueKoa from 'vue-koa'
import Server from '@/server'

Vue.use(VueKoa)

let Vm = Vue.extend(Server)
let vm = new Vm()
vm.$mount()

<!-- server.vue -->
<template>
  <koa>
    <router url="/api">
      <api :use="apiMiddleware"></api>
      <api url="/users">
        <api method="get" url="/list" :use="listUsers"></api>
        <api method="post" url="/create" :use="[koaBody, createUser]"></api>
      </api>
      <api method="all" url="*" :use="apiNotFound"></api>
    </router>
    <listen :port="port"></listen>
  </koa>
</template>

// server.vue <script>
export default {
  // ...
  data () {
    return {
      users: [],
      port: 7777
    }
  },

  methods: {
    async apiMiddleware (ctx, next) {
      // ...
    },
    createUser (ctx) {
      let user = ctx.request.body
      this.users.push(user)
      ctx.status = 201
      ctx.body = 'Created.'
    },
    listUsers (ctx) {
      ctx.body = this.users
    },
    apiNotFound (ctx) {
      ctx.throw(404, 'Api not found')
    }
  }
}

Credits

Thanks to Vue, avoriaz-ava-example.