Skip to content

πŸ’» Vue - Boilerplate Front : Vue 3, Vuex, Vuetify 3, JWT, Jest (Beta)

License

Notifications You must be signed in to change notification settings

weareopensource/Vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

CI Code Climate Dependabot badge Known Vulnerabilities Docker Pulls

🌐 WeAreOpenSource Vue 3 - Beta

πŸ“– Presentation

This project is a Vue 3 stack that can be ran as a standalone FrontEnd. Or in a fullstack with another repo of your choice (ex: Node, Swift).

Quick links :

Our stack Vue is actually in Beta.

πŸ’» Vue 3 / Vuetify 3 / Jwt

πŸ“¦ Technology Overview

Subject Informations
Available
Architecture Layered Architecture : everything is separated in layers, and the upper layers are abstractions of the lower ones, that's why every layer should only reference the immediate lower layer (vertical modules architecture)
Security JWT Stateless - have a look on Node stack for more informations
CI Github Action
Linter ESLint ecmaVersion 10 (2019)
Developer Coveralls - Code Climate - Dependency status - Dependabot - Snyk
standard-version / semantic-release - commitlint - commitizen - @weareopensource/conventional-changelog
Dependencies npm
Deliver Docker & Docker-compose
Being released
Testing Jest WIP
In reflexion
WIP wip

πŸŽ‰ Features Overview

Core

  • User : classic register / auth

Examples

  • Tasks : list - add - edit - delete
  • Mails Subscriptions : add

πŸ“Œ Prerequisites

Make sure you have installed all of the following prerequisites on your development machine:

πŸ’₯ Installation

It's straightforward (you can use yarn if you want)

git clone https://github.com/weareopensource/vue.git && cd Vue
npm install -g @vue/[email protected]
npm i

πŸƒ Running Your Application

Development

  • npm start to run a dev server with hot-reloads. Available at http://localhost:8080/.

/!\ in order to launch Vue with our node stack, node need to accept CORS. You can specify it in config or like it WAOS_NODE_cors_origin=['http://localhost:8080'] npm start when you starting node.

Production

  • npm run build to build a prod server.

others

  • vue:serve : npm vue:serve -> be careful, this bypass config generation of the stack
  • vue:build : npm vue:build -> be careful, this bypass config generation of the stack
  • test : npm test
  • test e2e : npm run test:e2e
  • test unit : npm run test:unit
  • lint : npm run lint
  • commit : npm run commit
  • release : npm run release -- --first-release standard version, changelog, tag & choose version number : -- --release-as 1.1.1
  • release:auto : GITHUB_TOKEN=XXXXX npm run release:auto semantic release, changelog, tag, release require repositoryUrl conf in package.json
  • generateConfig : npm run generateConfig

🐳 Docker Way

docker

  • docker run --rm -p 8080:80 weareopensource/vue

if you want to build yourself : docker build -t weareopensource/vue . --build-arg WAOS_VUE_api_port=4000

docker-compose (example with Node stack as api)

  • docker-compose up

Configuration

The default configuration is : src/config/defaults/development.js The other configurations : src/config/defaults/*.js overwrite the default configuration, you can create your own.

We take into account all system environment variables defined under the form WAOSVUE<path_toVariable>. A pre-build npm script turns under the hood those system environment variables into an object, infering paths from the varialbles name, merged to the configuration defined on src/config/defaults to regenerate the file used src/config/index.js.

So configuration avalable on src/config/defaults/development file are overidable. You can for instance define the app name by defining those system environment variables :

WAOS_VUE_app_title='my app =)'

✏️ Contribute

πŸ“œ History

This work is based on MEAN.js and more precisely on a fork of the developers named Riess.js. The work being stopped we wished to take it back, we want to create updated stack with same mindset "simple", "easy to use". The toolbox needed to start projects, but not only with Node and Angular ...

We dreams to create stacks Backs / Fronts, aligns on feats & Architecture, in multiple languages. This to allow anyone to create fullstack on demand (VueJS, Node, Swift …) and keep updates. While exploring resilient and scalable deployment, as well as growth hacking via our articles.

Feel free to help us ! :)

πŸ“‹ Licence

Packagist

πŸ”— Links

Blog Slack Discord Mail