https://github.com/atinux/vue-adonis
Boilerplate for using AdonisJS + Vue.js with server-side rendering
https://github.com/atinux/vue-adonis
Last synced: 10 months ago
JSON representation
Boilerplate for using AdonisJS + Vue.js with server-side rendering
- Host: GitHub
- URL: https://github.com/atinux/vue-adonis
- Owner: atinux
- Created: 2016-10-16T22:15:20.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-01-06T13:59:11.000Z (about 9 years ago)
- Last Synced: 2025-02-27T09:30:52.067Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 50.8 KB
- Stars: 154
- Watchers: 10
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Adonis-Vue
> AdonisJS + Vue.js = :fire:
## 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
:warning: **I now recommend to use [adonuxt](https://github.com/nuxt/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](https://github.com/vuejs/vue-cli).
```bash
vue init atinux/vue-adonis
cd # move to your project
mv .env.example .env # Add environment variables for Adonis
npm install # or yarn install
```
## Usage
### Development
```bash
npm run dev
```
Go to [http://localhost:8080](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](http://adonisjs.com/docs/3.1/env)).
```
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](https://devcenter.heroku.com/articles/nodejs-support#devdependencies)).
## Including Bootstrap
You can use external libraries like bootstrap, please see [Issue #1](https://github.com/Atinux/vue-adonis/issues/1#issuecomment-255539896)
## Documentation
- [AdonisJS](http://adonisjs.com/docs/)
- [Vue.js](http://vuejs.org/guide/)
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](https://github.com/mzabriskie/axios) for making HTTP request for both client-side and server-side.
Thanks to [Evan You](https://twitter.com/youyuxi), [Aman Virk](https://twitter.com/AmanVirk1) and their awesome communities for creating and maintaining Vue.js and AdonisJS :clap:
## 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](https://github.com/adonisjs/adonis-rally) project, it has a bunch of tests made by the creator of adonis-framework
- [vue webpack template](https://github.com/vuejs-templates/webpack/tree/master/template) might help you to see how to structure end-to-end and unit test for you web-app
## Licenses
- [AdonisJS license](https://github.com/adonisjs/adonis-framework/blob/develop/LICENSE.txt)
- [VueJS license](https://github.com/vuejs/vue/blob/master/LICENSE)