Skip to content

Latest commit

 

History

History
136 lines (105 loc) · 4.58 KB

README.md

File metadata and controls

136 lines (105 loc) · 4.58 KB
Raw

❗ Under development! Use it carefully! ❗

Vue 3 boilerplate by DSR Corporation

This is vue 3 project architecture that resolves most of the problems developers usually need to resolve on the project start-up such as project structure/state management/dependencies management/auth framework/basic components etc. It allows starting development rapidly.

Please note: This boilerplate is based on the recently released vue 3.0. Vue 3.x ecosystem is quite young which creates obvious problems but it grows very fast. Vue 3.x provides significant improvements. This project will be updating with vue 3.0 ecosystem changes.

Table of contents

Prerequisites

  • NPM > 6.x

How to use

Just copy content of this repo and use it as a skeleton. You are free to do any adoptions e.g. change preprocessor etc. (The project is generated using vue-cli).

Project structure

TBD

Features and roadmap

  • Code validation
    • Esling configuration ✅
    • Prettier ✅
    • Typescript and tsconfig.json configuration ✅
  • State management
    • Integration of Vuex 4.x ✅
    • Examples (login/logout) ✅
    • Typings improvements ❌ we hope for improvements from the vuex team (vuex 4.x is in beta now)
    • Enhanced dependency injection in vuex modules ❌
  • Dependencies management (please watch our presentation on youtube)
    • Tsyringe integration ✅
    • Examples (Logger, toaster, user service) ✅
  • Vue 3 composition API
    • Basic examples (i18-n, vuex useStore) ✅
    • Advanced examples ❌
  • Components
    • Render function based components examples ✅ (ListRenderer component)
    • Types for $props in setup helper ❌
  • Localization
  • Basic components
    • Button ✅
    • Input ✅
    • Svg icon ✅
    • Dropdown ❌
    • Checkbox/Radio ❌
  • Form validation/validation framework
    • Client-side form validation ✅
    • Show backend form errors ✅
  • Common functionality
    • Login form ✅
    • Auth framework (token) ✅ (partially done)
    • Lazy loading example (Login) ✅
    • Basic header, several example pages (list and view) ✅ (partially done)
  • CSS
    • scss + BEM ✅
    • Make it beautiful (introduce design system) ✅
  • Testing
    • Integrate testing frameworks - Cypress ✅
    • Example tests ✅
    • DI integration example ❌
  • API mocking (if you BE development goes in parallel and you need to mock API)
    • MirageJs integration ✅
    • Typings improvements ❌

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Run your end-to-end tests

npm run test:e2e

Lints and fixes files

npm run lint

License

MIT License

Copyright (c) 2020 DSR Corporation

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.