/vue-adonis

Boilerplate for using AdonisJS + Vue.js with server-side rendering

Primary LanguageJavaScript

Adonis-Vue

AdonisJS + Vue.js = 🔥

Features

  1. Vue.js 2.0 with server-side rendering (+ cacheable components)
  2. Hot reloading (via webpack)
  3. Configurable via config/vue.js
  4. vuex and vue-router are installed and ready to use (synced with vue-router-sync)
  5. All the awesome features of AdonisJS

⚠️ I now recommend to use adonuxt, it has all these features + code splitting, custom layouts, middlewares and it's easier to start with.

Installation

This is a project template for vue-cli.

vue init atinux/vue-adonis <project-name>
cd <project-name> # move to your project
mv .env.example .env # Add environment variables for Adonis
npm install # or yarn install

Usage

Development

npm run dev

Go to http://localhost:8080

Production

Set the env variables in your provider and add ENV_SILENT=true so Adonis will not try to load the .env file (see docs).

npm start

Heroku

Add NPM_CONFIG_PRODUCTION=false in your env variables so it will install the dev dependencies to build the sources (see Heroku docs).

Including Bootstrap

You can use external libraries like bootstrap, please see Issue #1

Documentation

To understand the preFetch method in the matched route components (resources/src/server-entry.js), I recommend to look at https://github.com/vuejs/vue-hackernews-2.0

I recommend to use axios for making HTTP request for both client-side and server-side.

Thanks to Evan You, Aman Virk and their awesome communities for creating and maintaining Vue.js and AdonisJS 👏

Tests

There is no tests in this template because it's hard to know exactly which tests you will use and even how you want to structure them in this isomorphic application.

Here some ideas:

  • adonis-rally project, it has a bunch of tests made by the creator of adonis-framework
  • vue webpack template might help you to see how to structure end-to-end and unit test for you web-app

Licenses