Design System

• UI Pattern; if used more than 3 time, turn into UI Component
• UI Component; if used more than 3 time, put in Design System
• UI Primitives; avatar, badge, button, checkbox, input, radio, select, highlight, icon, link, tooltip, etc

Folder & File Structure (src folder)

• assets
• components
• composables
• docs
  It'll be more likely that certain aspects of the project are documented if the developer never has to leave their IDE. Readme.md for the project. Routes, Stores, Views, Layouts, Themes, etc.
  Structure the file based on routes and features.
• helpers
  This is a common directory in many frameworks for basic input-output functions that are reusable throughout the project. They are typically easy to unit test and usually end up being used more than once. I like to start with a single index.js file and then as the helpers grow, break them up into more grouped files like https.js, cache.js, time.js, etc. Everything in this directory can just be imported and used on demand and if a function ends up never being used at all it can be easily tree shaken from the production bundle.
• layouts
  Define page components and layout components that can be reused across multiple pages. Same as layouts folder in Nuxt project.
• plugins
  Configuring the installed package and exporting the setting.js. Like; axios, notification plugin, theme configurations, etc.
• router
  Structure the file based on routes
• services
  Contain all configuration to Restful API routes
• stores
  Structure the file based on routes
• views
  Structure the file based on routes
• app.vue
• globals.js
  File to register the configured global plugins.
• main.js

Advanced Best Practices

• When possible each component should be defined in its own dedicated file (SFC)
• Single File Components should be named in PascalCase
• Base components should all start with the same prefix (like Base or App)
• Component names should always be multi-worded to not conflict with any existing or future HTML elements. Don't create a Table or a Button component.
• Single instance components should begin with the prefix “The”
  For example a site header or footer
  This groups them together and declares them as single use
• Tightly coupled child components should be prefixed with their parent component's name
  For instance a TodoListItem in a TodoList
  This groups them together and declares them related
• Component names should begin with the most top level (usually general) words and end with the most specific
  Such as SearchWidgetInput, SearchWidgetResultsList, SearchWidget
  This groups related components together in the file structure
• Standardized Routes and Pages / Views naming convention

Step by step when adding a feature in Vue 3 project

• Add documentation in docs folder
• If Restful API Based Feature
  Add Restful API routes to services/restful-api-feature.js
  Using axios aliases; axios.post, axios.get, axios.put, axios.delete
  Creating the store
  Creating the views component
  Register in routes file
  Test the added feature
• If App Based Feature
  Add configuration in plugins / composable
  Register in global.js file
  Register in routes file
  Testing the added feature
• If New Static Page
  Add style in assets folder or directly in the SFC file
  Register in routes

Global CSS

• using CSS
• using SCSS

CSS per components

• using CSS
• using SCSS
• using Scoped
• using Module

Using CSS Frameworks

• bootstrap
• tailwind
• bulma

Using UI Kit for Vue

• HeadlessUI
• Vuetify
• Bootstrap-Vue