Vue Auth Boilerplate
This is a starter app / boilerplate for any type of SPA application that you'd want to build with VueJS. If you use, say, Laravel / laravel-api-boilerplate-jwt (a package by # francescomalatesta), you'll feel right at home as it integrates with it's API Auth functions.
Snapshots
Login page
Register page
Home page
vue-cli 3
For scaffolding of this app, vue-cli 3 has been used, meaning, you get to use latest vue-cli 3 features, like plugins.
UIkit
It would seem that UIkit CSS framework doesn't get as much attention as it deserves. I believe it's one of the most complete frameworks out there, fun to use, awesome when you master it. This boilerplate is built has included UIKit, but you don't need to use it if you don't want to. Login and Register pages are self-contained, and contain their own style, just for this reason.
If you want to change and use Bootstrap:
npm remove uikit --save
npm install bootstrap --save
Also don't forget to cleanup main.js file.
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Run your unit tests
Tests are not really written, but you can use Jest built-in into this boilerplate. Pull requests are welcome, as well. :)
npm run test:unit
Additional settings
Please visit /src/settings.js and change the params there to suite your app. It's kinda important since API_SERVER will be used to contact Auth functions of your API.
APP_NAME: "Pure Awesomeness",
API_SERVER: "http://192.168.10.10/api/"
File structure
This is pretty much the default file structure that you get from scaffolding app from vue-cli 3, added stuff to suit the needs of the boilerplate.
.
|____App.vue
|____components
| |____globals
| | |____ButtonSpinner
| | | |____index.vue
|____main.js
|____router
| |____index.js
|____settings.js
|____store
| |____actions
| | |____auth.js
| | |____user.js
| |____index.js
| |____modules
| | |____auth.js
| | |____settings.js
| | |____user.js
|____styles
| |____index.scss
| |_____variables.scss
|____utils
| |____api.js
|____views
| |____auth
| | |____login
| | | |____img
| | | | |____login.jpg
| | | |____index.vue
| | |____register
| | | |____img
| | | | |____register.jpg
| | | |____index.vue
| | | |____js
| | | | |____imagesloaded.pkgd.min.js
| | | | |____zxcvbn.js
| | |____styles
| | | |____auth-styles.scss
| |____home
| | |____index.vue
| |____layouts
| | |____App
| | | |____index.vue
Credits
Mainly credits go to codrops/PasswordStrengthVisualization. This repo literally inspired me to make a nice Auth SPA with Vue and share it with the world.
If you like this package, please star it, fork it, I'm open for pull requests as well if I missed something.
- Password Strength 'meter' by Pankaj Parashar
- zxcvbn by Daniel Lowe Wheeler
- Images from Unsplash.com
- imagesLoaded by Dave DeSandro
- Pixelate by Ken Fyrstenberg, Epistemex, License: CC BY 3.0
- Fullscreen image in Canvas by Chrysto Panayotov
LICENSE
MIT
