File Structure

├── .storybook
├── .vscode
├── public
├── src
│   ├── api
│   ├── assets
│   ├── components
│   ├── i18n
│   ├── mixins
│   ├── router
│   │   └── index.js
│   ├── store
│   │   ├── index.js
│   │   └── modules
│   │   │   └── ...
│   ├── stories
│   ├── styles
│   ├── tailwind
│   ├── helpers
│   ├── views
│   ├── http.js
│   ├── main.js
├── tests
│   ├── unit
│   └── e2e
├── .env
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js
├── .prettierrc
├── .babel.config.js
├── .jest.config.js
├── package.json
├── tailwind.js
└──  vue.config.js

Files

.storybook

Storybook can be configured in several different ways. That’s why we need a config directory. Storybook config documentation

See Storybook

.vscode

If you are using Visual Studio Code as editor in this folder you will find the settings

See Linter and Prettier

public

When to use the public folder

You need a file with a specific name in the build output.
You have thousands of images and need to dynamically reference their paths.
Some library may be incompatible with Webpack and you have no other option but to include it as a <script> tag.

See Managing assets

src/api

In this folder we will create a single js file for each entity/controller in backend ie auth, customers, posts

See Backend API

src/assets

Images, svg, fonts, videos... everything that would be loaded directly with webpack.

See Managing assets

src/components

Vue components live here. Every .vue file wich is not a View is a Component.

Components should be grouped in folders by type and follow a name convention

├── Lessons
│   ├── LessonsHeader.vue
│   ├── LessonsFooter.vue
│   ├── LessonsList.vue
│   ├── LessonsListItem.vue

See Component structure

src/i18n

If our app uses internacionalization we will put here the json files for each language and library related files.

src/mixins

Even though global mixins are considered a bad practice and we should avoid to use them. If we need to create some here's the place.

For local mixins we just simply put them in the same folder where we are going to use them.

├── Lessons
│   ├── LessonsHeader.vue
│   ├── LessonsFooter.vue
│   ├── LessonsList.vue
│   ├── LessonsMixin.js

See Mixins

src/router

We will create our router using index.js file inside a router folder (instead of using a router.js file). This way we have more room to create aditional files or middlewares.

See Vue Router

src/store

See Vuex

src/stories

Folder used for Storybook stories

See Storybook

src/styles

Folder used for global css styles. For local styles we will place them inside the Vue Component

See Tailwind

src/tailwind

Folder used for tailwind extensions.

See Tailwind

src/helpers

Folder used for pure javascript functions shared between components (no mixins)

See Helpers

src/views

Every router path renders a vue component. This component is a View. These views are stored here.

See Vue Router and Views

src/http.js

Config file for bootstraping the axios instance and setting up the interceptors and middlewares

See Backend API

src/main.js

Entry point of the App

tests

See Testing