❤️ Real world base Vue.js app. Access/refresh tokens auth, api services, http client, vuex modules
This project based on real world practice and ready to use. Have a fun!
src
Source =)
assets
Images/Fonts/Other media stuff.
components
Shared components folder. -
DataBoxwrap in this component any received data. It represents loading(spinloader animation), error and empty statuses (examaple in
src/pages/News.vue). -
UiImgLoader-
imgtag wrapper. Shows image loading(pulseloader animation) status and animate onloading as option. -
UiModal- simple modal window. -
PulseLoadingand
SpinnerWave- loading animation. -
UiUploadMultiand
UiUploadSingle- file upload example components. - ...
config
App config files. Each category in separate file.
directives
layout
Base app layout components. -
Header,
Footercomponents and main layout wrapper.
mixins
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- router initialization. -
routes- routing. -
middlewares: -
initCurrentUserStateMiddleware- Current user state initialization (each time app loads, check refresh token and fetch current user if token exist.) -
checkAccessMiddleware- Each time user change route, check permissions to route. -
setPageTitleMiddleware- Each time user change route, set page title. -
util: -
routePropResolver- Pass params from URL to component as props (example in
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- Auth methods and API calls. -
http.init- Http request class. -
util: -
ResponseWrapper- Represent response object. -
ErrorWrapper- Represent error object. -
clearData- Uses to clear request data before send it. Helper.
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 ... =)
In
/build/utils.js>>
generateLoaders('sass')
import debounce from '../directives/debounce' directives: { debounce }
And use it in a template.
Just make mutation
commit('dom/TOAST', { message: 'hello', duration: 2000, type: 'success' })
Set up yours svg icons in
src/components/icons/folder. Modify
UiIconBase.vuerelated to yours newly added icons and use it in template.
# clone repo git clone https://github.com/zmts/vuejs-boilerplate.gitinstall 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.
!!! Project still in progress !!!
2017 - 2018 - 2019 - 2020 ...