Onsen UI + Vue + Vue Router + Axios PWA Starter Project

Information

Please read carefully before use this project starter

1. This project is based on onsenui-vue-pwa webpack template
2. Since I dont need PWA at the moment, so I remove all the script related to PWA in index.html. If you want to use PWA, just rename index-serviceworker.html to index.html
3. Since I need to access the page via URL in the browser, so instead of using Onsen ui <v-ons-navigator> system, I use vue-router to meet my requirement.
4. For some pages and components I split the html and scss in *.vue into separate file for my convenience, following Ionic2 project structure. However if you prefer the vue way, you can use common vue project structure.
5. Use eslint-airbnb, thus every line of code should follow airbnb javascript style guide
6. Additional rules was added to eslintrc.js as follows :
   • 'no-console': 0, // allow console.log
   • 'no-param-reassign': 0 // disable warning when assignment to property of function parameter

List of features implemented in this project

1. Side menu navigation
2. Application state management using Vuex
3. Page and component creation
4. RESTAPI consumption using axios
5. Custom routing on onsenui-vue using vue-router

Dependencies

• onsenui
• vue
• vue-onsenui
• vue-router
• vuex
• axios

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Reference :

• Separate HTML and SCSS file. link
• Enable scss working in vue link
• Vue routing using hash setup. link
• Getting started with vuex. link
• Delete service worker. link

Screenshots :

Android

iPhone