This project based on real world practice and ready to use. Have a fun!

• Http request class that implements API calls with Auth and tokens refresh based on Axios
• Data access layer/API calls
• Response wrapper/Response error wrapper
• Base common and layout components
• Some help mixins

• index.html
• src
  • assets
  • components
  • config
  • directives
  • layout
  • mixins
  • pages
  • router
  • scss
  • services
  • store
  • .env.js
  • app.init.js
  • global.helpers.js

Main index HTML file.

Source =)

Images/Fonts/Other media stuff.

Shared components folder.

App config files.

Directives.

Base app layout components.

• One mixin per file principle
• Local(not global) mixin filename === mixin method/prop name principle (setModelMixin.js === setModelMixin)
• Global mixins names from $ principle

Page wrapper components(Pages) and Local components.

Router instance and routing declaration.

Style files(partials, variables, mixins, reset).

Data access layer/API calls. API calls must be represented in separate classes (not in vuex action).

App store and modules.

Environment variables (add this to git ignore).

Root app initialization file.

Add global helpers to window object.

/src/router/index.js >> initCurrentUserStateMiddleware. Each time app loads middleware check refresh token and fetch current user if token exist.

/src/router/index.js >> checkAccessMiddleware. Each time user change route, app check permissions to route.

In /build/utils.js >> generateLoaders('sass')

import debounce from '../directives/debounce'
directives: {
  debounce
}

And use it in template.

<input type="text" v-model="name" v-debounce="500" @debounce-change="runSomeMethod">

# clone repo
git clone https://github.com/zmts/vuejs-boilerplate.git

# 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

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