# Folder Structure
# @core
This directory contains our core files and you are not intended to change these files.
# @fake-db
It contains fake data we get back from API. This is only useful if you want to check what API call returns in response.
# assets
It contains logos and other static assets. You can place your static assets here.
# components
Place your component in this directory. Components in this dir will be auto-registered and on-demand, thanks to unplugin-vue-components (opens new window).
How it will auto register components on demand 🤯
- Just create new component in
components
directory - Reference it in Pascal case name in any file
Example:
It will automatically turn this
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
into this
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
<script>
import HelloWorld from './src/components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld,
},
}
</script>
read more here (opens new window).
# layouts
Place your app's layouts in this directory. This is used in conjunction with vite-plugin-pages (opens new window) which is used for pages
directory to generate routes based on directory structure just like nuxt (opens new window).
# navigation
This directory contains vertical nav & horizontal nav items. Items written in /src/navigation/vertical/index.ts
will be for vertical nav and items written in /src/navigation/horizontal/index.ts
will be for horizontal nav. Both files are imported in /src/layouts/default.vue
).
Related: Fetching navigation items from database via API
Related: How to create vertical navigation
Related: How to create horizontal navigation
# pages
Contains your app pages. Just create a new file and new route will be auto generated based on file name and its placement in the pages
directory.
Show me basic example 👀
Create a new file in pages directory
/src/pages/about.vue
with following content<template> <p>This is about page</p> </template>
✨ Route is auto generated based on your file name
Related: How to create a new page
# plugins
This directory contains plugins we used in our template.
# router
This directory contains configuration related to router. It doesn't have any routes as they are auto generated but it has ACL configurations.
# stores
This contains pinia (opens new window) store. With our template we haven't used any store so it is empty.
# styles
You can write your styles in this directory.
_variables.scss
: Use this file to override variablesstyles.scss
: Use this to write your custom styles