VueJS Standard

Tools Requirement

Code Editor

we will be using Visual Studio Code as our Code Editor for work. link

NodeJS Version

  • As a standard, we will be using NodeJS 18 or Above to create new projects Vue 3.
  • And also, we will be using NodeJS 14 or Above to develop existing project using Vue 2.
  • You can download the latest version of NodeJS from here

Standard plug-in

CSS Framework

  • Pure Tailwind
  • Daisy UI
  • Vue Tailwind

Bootstrap

  • Bootstrap Vue

Default Setup Project

  • Vue 2
    • Javascript
    • Option API
  • Vue 3
    • Typescript
    • Composition API

(Note) : The migration project from Vue 2 is given the convenience of continuing to use JavaScript and Option API setup​

Other Library

Category Library
Router vue-router
State Management vuex^, pinia^^
Http Client axios, fetch
Validation vee-validate
Micro Frontend single-spa-vue
Unit Test jest
Datetime date-fns, day-js
Utility lodash, ramda

Note : (^)Vue2 (^^)Vue3

Project Structure Vue 2

Explanation Core directory

image

  • assets (contains images, css, files)​
  • components (contains global component)​
  • constants (contains constants static variable)​
  • layouts (contains global layout)​
  • plugins (contains external / 3rd party library)​
  • services (contains global setup api, component, router, and store)

Explanation Modules directory

image

  • pages (contains all pages inside modules)
  • router (contains registered route in modules)​
  • store (contains state management files)

Project Structure Vue 3

Explanation Core directory

image

  • assets (contains images, css, files)​
  • components (contains global component)​
  • interfaces (contains list of interface)​
  • layouts (contains global layout)​
  • plugins (contains external / 3rd party library)​
  • services (contains global setup api, component, router, and store)

Explanation Modules directory

image

  • components (contains all components in modules)
  • interfaces (contains all interfaces inside in modules)
  • pages (contains all pages inside modules)
  • router (contains registered route in modules)​
  • store (contains state management files)

Style Guide

1. Component Name

Vue 2 Using slug-case or PascalCase

image

Vue 3 Using setup script

image

2. Component Files​

Each component should be in its own file​

image

3. Base Component Names

Correct component naming

image

4. Tightly Coupled Component Names​

Combining component names

image

5. Self-closing Components​

image

6. Prop Definitions​

Prop definitions should be as detailed as possible​

image

7. Prop Name Casing​

image

8. Component Style Scoping

Except for global components, the other components should always be scoped.

image