Folder Structure #

Understand the folder structure of the template and what the template contains.

Step-1 : Root Structure #

The root folder contains the core code of this application. The DashCode folder structure looks like this.

.
├─ src
│  ├─ assets
│  │  ├─ images
│  │  ├─ scss
│  ├─ components
│  │  ├─ Button
│  │  │  ├─ Button.vue
│  ├─ constant
│  |  ├─ data.js
│  |  ├─ appex-chart.js
│  |  ├─ chartjs-data.js
│  |
│  ├─ Layout
│  ├─ mixins
│  ├─ router
│  ├─ store
│  ├─ views
│  │  ├─ home
│  │  ├─ components
│  │  ├─ chart
|  |- App.vue
│  ├─ main.js
|
├─ favicon.svg
├─ index.html
├─ .gitignore
├─ package.json
├─ README.md
|- loader.css
|- logo.svg
|- postcss.config.js
|- tailwind.config.js
|- vue.config.js
|- vite.config.js
│
│
└─ package.json

Step-2 : Assets #

The assets folder contains logos and other static assets. You can place your static assets here.

Step-3 : Components #

Place your components in the components folder. Each component should be placed in its own folder. The folder name should be the name of the component.

├─ Components
│  ├─ Button
│  │  ├─ index.vue
│  │
│  ├─ Card
│  │  ├─ index.vue
│  │
│  ├─ Textinput
│  │  ├─ index.vue

<template>
  <div id="app">
    <Button />
    <Card />
    <Textinput />
  </div>
</template>
<script setup>
import Button from "@/components/Button";
import Card from "@/components/Card";
import Textinput from "@/components/Textinput";
</script>

Step-4 : Layout #

The Layout folder contains the layouts of this application. You can place any new layout here.

Step-5 : Router #

The router folder contains the routes of this application. You can add your new route here.

Step-6 : Views #

The views folder contains the views of this application. You can place new views here.

Step-7 : Store #

The store folder contains the pinia store files of this application. You can use this folder to store your pinia files.

Step-8 : Constants #

Define your constants in the constants folder. You can place your constants here.