Real World Vue.js Boilerplate

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

Features

• 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
• Vue CLI v4
• Developed to work with: https://github.com/zmts/supra-api-nodejs

Project structure

• src

  • assets

  • components

  • config

  • directives

  • layout

  • mixins

  • pages

  • plugins

  • router

  • scss

  • services

  • store

  • .env.js

  • main.js

src

Source =)

assets

Images/Fonts/Other media stuff.

components

Shared components folder. -

DataBox

src/pages/News.vue

UiImgLoader

img

UiModal

PulseLoading

SpinnerWave

UiUploadMulti

UiUploadSingle

config

App config files. Each category in separate file.

directives

• Handy debounce directive

layout

Base app layout components. -

Header

Footer

mixins

• One method/prop per file principle.
• Name files same as method/prop.

• currentUser

  - Includes current user object from store. Global.

• formatDateTime

  - Datetime moment formatters. Global.

• jumpTo

  - Help jump to some DOM element. Global.

• prepareFetchParamsMixin

  - Prepare params for data fetching (examaple in

  src/pages/News.vue

  ).

• prepareQueryParamsMixin

  - Prepare params for setting it in URL (examaple in

  src/pages/News.vue

  ).

• setModelMixin

  - Use to set same fields from response that declared in front-end model.

pages

Page wrapper components(Pages) and Local components.

plugins

• globalEventBus

  - $bus.

router

Router instance and routing declaration. -

index

routes

middlewares

initCurrentUserStateMiddleware

checkAccessMiddleware

setPageTitleMiddleware

util

routePropResolver

src/router/routes.js

scss

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

services

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

auth.service

http.init

util

ResponseWrapper

ErrorWrapper

clearData

store

App store with separate modules.

.env.js

Environment variables (add this to git ignore).

main.js

Root app initialization file.

global.helpers.js

Add global helpers to window object. Yepp globals ... =)

How to declare global SCSS variables/mixins etc... ?

In

/build/utils.js

generateLoaders('sass')

Utils/Helpers

What about debounce ?

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

And use it in a template.

Notifications/Toast:

Just make mutation

commit('dom/TOAST', { message: 'hello', duration: 2000, type: 'success' })

Icons/SVG:

Set up yours svg icons in

src/components/icons/

UiIconBase.vue

Build Setup

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

install dependencies
npm install
serve with hot reload at localhost:8080
npm run serve
build for production with minification
npm run build

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

Amazing repos where I found some great approaches:

• https://github.com/sdras/vue-sample-svg-icons
• https://github.com/MillerRen/vue-boilerplate
• https://github.com/vuejs-tips/v-debounce

!!! Project still in progress !!!

2017 - 2018 - 2019 - 2020 ...