@averjs/renderer v3.1.0

Be aware that this package is currently tailored to our own needs and lacks flexibility. We are currently working on that in our spare time. It is used in several production websites and if you feel like using it, go ahead.

aver.js

This plugin has everything you need to start a new Vue project which is capable of server side rendering.

Installation

The @averjs/core holds the core with express and all the other stuff which is necessary for server side rendering. And than there is @averjs/renderer for all the webpack stuff. The 2 packages are seperated so you are able to have the rendering stuff in the devDependencies and therefore it is not getting installed in production.

To install both, execute the following commands inside a new and empty directory.

yarn add @averjs/core
yarn add --dev @averjs/renderer

npm install @averjs/core
npm install -D @averjs/renderer

Setup

To get you started as fast as possible with a new project, there is a executable, which lets you set this up with ease.

Jump into your working directory and execute tohe follwing command.

node_modules/.bin/aver --init

When the executable is done setting up the new Project, you can start the app by executing yarn run dev or npm run dev.

Folder structure

There are 2 main root folders, api and src. All your Vue.js code belongs inside the src and all the server side code belongs in the api folder. When you setup the project by running the aver --init command, you will see how the api and src folders should be strucuted. If you stick to the same structure, you are able to use the provided modules aliases which are listed in the folder structure below.

api folder

api
└───database (@database)
│   └───seeds
└───errors (@errors)
└───mail (@mail)
│   └───templates
└───middlewares (@middlewares)
└───models (@models)
└───queues (@queues)
└───routes (@routes)

src folder

src (@)
└───components (@components)
└───mixins (@mixins)
└───pages (@pages)
└───vuex (@vuex)
└───resources (@resources)

Vuex

TODO

Vue router

Server Routes

TODO

Middlewares

TODO

Configuration

By creating a aver-config.js file inside your root directory, you can configure Aver.js or provide plugins. You can find all parameters listed below.

Core Paramters

Webpack Paramters

Plugins

This is a list of all the plugins currently available:

TODO

• Add documentation
• Add jest
• Add tests
• Add modern mode
• Add more css preprocessors
• Use joi in config package (https://github.com/hapijs/joi)
• Add eslint
• Use lodash/template to pass configuration to vue app