# Folder Structure

Since Light Able comes with a gulp, it has minor differences in structure but one can pick any one and start making changes, both are totally independent.

{% tabs %}
{% tab title="Vue.JS" %}

```
└── 📁 public
 |    ├── favicon.svg
 |    └── index.html
├── 📁 src
 |    └── 📁 assets
 |    |    ├──  📁 css
 |    |    ├──  📁 fonts
 |    |    ├──  📁 images
 |    |    ├──  📁 json
 |    |    └──  favicon.svg
 |    |
 |    └── 📁  components
 |    |    ├──  📁 common
 |    |    ├──  c-footer.vue
 |    |    ├──  c-menu.vue
 |    |    ├──  c-navbar.vue
 |    |    ├──  footer.vue
 |    |    ├──  page-header.vue
 |    |    ├──  right-bar.vue
 |    |    └──  slidebarar.vue
 |    |
 |    └── 📁  layout
 |    |    ├──  c-main.vue
 |    |    ├──  c-vertical.vue
 |    |    ├──  c-navbar.vue
 |    |    ├──  component.vue
 |    |    ├──  layout-2.vue
 |    |    ├──  horizontal.vue
 |    |    ├──  main.vue
 |    |    └──  vertical.vue
 |    |
 |    └── 📁  router
 |    |    ├──  index.js
 |    |    └──  router.js
 |    |
 |    └── 📁  state
 |    |    ├──  📁 modules
 |    |    ├──   helper.js
 |    |    └──   store.js
 |    |
 |    └──  📁 views
 |    |     ├──    📁  components       
 |    |     └──    📁  live-preview  
 |    |
 |    ├──   App.vue 
 |    ├──   authutils.js
 |    └──   main.js    
 |    ├──  .gitingore
├── app.config.json
├── jsconfig.json
├── package.json
└── vue.config.js
```

{% endtab %}
{% endtabs %}

### Light Able Vue Folders Structure

<table><thead><tr><th width="147">File/Folder</th><th>Path</th><th>Description</th></tr></thead><tbody><tr><td>📂Light Able</td><td>root:</td><td>The main folder of our project.</td></tr><tr><td>📁public</td><td>public/</td><td>Contains static assets like favicon and html</td></tr><tr><td>📁 src</td><td>src/</td><td>Contains Vue components, routers, layouts etc. </td></tr></tbody></table>