Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zmts/beauty-vuejs-boilerplate
❤️ Real world base Vue.js app. Access/refresh tokens auth, api services, http client, vuex modules
https://github.com/zmts/beauty-vuejs-boilerplate
access-token api boilerplate data-access-layer enterprise flux http-wrapper jwt realworld refresh-token spa vue-boilerplate vuejs vuex
Last synced: about 1 month ago
JSON representation
❤️ Real world base Vue.js app. Access/refresh tokens auth, api services, http client, vuex modules
- Host: GitHub
- URL: https://github.com/zmts/beauty-vuejs-boilerplate
- Owner: zmts
- License: mit
- Created: 2017-01-14T23:57:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T02:36:17.000Z (over 1 year ago)
- Last Synced: 2024-04-14T13:15:41.437Z (5 months ago)
- Topics: access-token, api, boilerplate, data-access-layer, enterprise, flux, http-wrapper, jwt, realworld, refresh-token, spa, vue-boilerplate, vuejs, vuex
- Language: Vue
- Homepage:
- Size: 3.91 MB
- Stars: 858
- Watchers: 30
- Forks: 210
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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`](#src)
- [`assets`](#assets)
- [`components`](#components)
- [`config`](#config)
- [`directives`](#directives)
- [`layout`](#layout)
- [`mixins`](#mixins)
- [`pages`](#pages)
- [`plugins`](#plugins)
- [`router`](#router)
- [`scss`](#scss)
- [`services`](#services)
- [`store`](#store)
- [`.env.js`](#envjs)
- [`main.js`](#mainjs)
### `src`
Source =)
### `assets`
Images/Fonts/Other media stuff.
### `components`
Shared components folder.
- `DataBox` wrap in this component any received data. It represents loading(spinloader animation), error and empty statuses (examaple in `src/pages/News.vue`).
- `UiImgLoader` - `img` tag wrapper. Shows image loading(pulseloader animation) status and animate onloading as option.
- `UiModal` - simple modal window.
- `PulseLoading` and `SpinnerWave` - loading animation.
- `UiUploadMulti` and `UiUploadSingle` - file upload example components.
- ...
### `config`
App config files. Each category in separate file.
### `directives`
- Handy debounce directive
### `layout`
Base app layout components.
- `Header`, `Footer` components and main layout wrapper.
### `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` - 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.
### 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/` folder. Modify `UiIconBase.vue` related to yours newly added icons and use it in template.
```
```
## Build Setup
``` bash
# 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](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/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 ..._