# Architecture

• Architecture
  • _templates
  • .vscode
  • docs
  • .vuepress
  • public
    • index.html
  • src
    • styles
    • assets
    • common
    • filters
    • interceptors
    • config
    • mixin
    • plugins
    • resources
    • components
    • styles
    • router
    • translations
    • store
    • utils
    • App.vue
    • main.js
  • .env.*
  • .eslintrc.json
  • tailwind.js

# _templates

Generator templates to speed up development. See the development doc for more.

# .vscode

Settings and extensions specific to this project, for Visual Studio Code. See the editors doc for more.

# docs

You found me! 😉

# .vuepress

Documentation config and destination folder See VuePress doc for more

# public

Where you'll keep any static assets, to be added to the dist directory without processing from our build system.

# index.html

This one file actually does get processed by our build system, allowing us to inject some information from Webpack with EJS, such as the title, then add our JS and CSS.

# src

Where we keep all our source files.

# styles

Where we keep our design variables and tooling.

# assets

This project manages assets via Vue CLI. Learn more about its asset handling here.

# common

Where we keep common javascript files, e.g. constants or validator functions. vue-configuration module uses this

# filters

This folder contains all global filters (pipes), each filter automatically will be added to global filters list.

# interceptors

Where we are keep interceptors of Http Client

# config

This folder contains all configuration of our application.

# mixin

You can store local or global mixins here

# plugins

In this folder need to add plugin which we are trying to integrate to our application You can store local or global mixins here

# resources

This folder contains resource Models of Http Client

# components

Where most of the components in our app will live, including our global base components.

# styles

Where we keep our design variables and tooling.

# router

Where the router, routes, and any routing-related. See the routing doc for more. Where we keep our design variables and tooling.

# translations

Here we are store translation files of i18n.

# store

Where all our global state management lives. See the state management doc for more.

# utils

These are utility functions you may want to share between many files in your application. They will always be pure and never have side effects, meaning if you provide a function the same arguments, it will always return the same result. These should also never directly affect the DOM or interface with our Vuex state.

# App.vue

The root Vue component that simply delegates to the router view. This is typically the only component to contain global CSS.

# main.js

The entry point to our app, were we create our Vue instance and mount it to the DOM.

# .env.*

Environment variables which will load before app start and will be stored in process.env, (*) is a env name (development, staging, production, ...)

Note: each env variable name must be start with VUE_APP_

# .eslintrc.json

Eslint configuration file, See the eslint doc for more. Note: each env variable name must be start with VUE_APP_

# tailwind.js

Configuration file for tailwindcss framework, See tailwindcss doc for more.