New Package to render .vue files to html


#1

I just finished my package called Servue
I’ve published a stable 1.x release of my package

What does it do?
Servue server-side-renders Vue Single File Components (.vue files) into html. It is a fully capable templating engine, and allows users to create nested layouts using slots and components.

The renderer provides the correct scripts, and styles on the client-side. It creates no extra build or compiled files. It’s perfect for multi-page applications and great for users wanting to use Vue with Express or Koa

It’s this easy to render .vue files:

await servue.render('home') // renders "home.vue" into html string

Link to github.io:
https://futureaus.github.io/servue/

Features

  • Supports precompilation
  • Supports layouts
  • Supports templating
  • Supports server-side Rendering
  • Supports head management
  • Supports imports CSS files and other assets
  • Supports custom language preprocessors (less, pug, etc)
  • No build or compile files, all in-memory

It’s an alternative to express-vue and the entire package is less than 300 lines of code.

It uses webpack behind the scenes, and has an awesome head management system unseen anywhere in the vue ecosystem. Here’s an example of head management, layouts and views

layouts/parent.vue

<template>
    <servue>
        <template slot="head">
           <title><slot name="title"></slot> - My Website</title>
           <meta name="hello" content="world">
        </template>
        <template slot="content">
            <header>Page: <slot name="title"></slot></header>
            <slot name="content"></slot>
            <footer>My Footer</header>
        </template>
    </servue>
</template>
<script>
import servue from "servue.vue"

export default {
    components: {
        servue
    }
}

</script>

This layout has a slot for content named content and a slot for the title named title

Now, the home file can use this layout:

home.vue

<template>
    <parent>
        <template slot="title">Home</template>
        <template slot="content">
            Hello
        </template>
    </parent>
</template>
<script>
import parent from "layouts/parent.vue"

export default {
    components: {
        parent //layouts can be multiple layers deep
    }
}
</script>

Getting some users for the package would be awesome.