Folder Structure

To enhance code maintainability, we've implemented a well-organized folder structure that groups similar files and components by their functionalities.

ONOMIS-VUE
├── 📂 public
├── 📂 src
|    ├── 📂 @core 
|    ├── 📂 composables   
|    ├── 📂 data 
|    ├── 📂 layouts   
|    ├── 📂 navigation
|    ├── 📂 pages
|    ├── 📂 plugins 
|        ├── 📂 i18n // Localization codes 
|        ├── 📂 Casl
|        └── 📜 useFetch
|    ├── 📂 router
|    ├── 📂 store
|    ├── 📂 styles  
|    └── 📂 views 
├── 📜 App.vue
├── 📜 index.html
├── 📜 main.js
├── 📜 app.config.js
├── 📜 package.json
├── 📜 tailwind.config.cjs
├── 📜 vite.config.js
└── 📜 README.md

@core

This directory Includes all of our core files and components.

@core
 ├── 📂 components
 ├── 📂 composables
 ├── 📂 scss
 └── 📂 utils // Includes all of the utility functions

WARNING

You are not authorized to update, modify, or change any files within this folder.

TIP

All files in this directory are automatically imported when needed. Take a look at vite.config.js to see which files are auto-imported.

layouts

layouts
 ├── 📂 components // Navbar components
 ├── 📜 Blank.vue 
 ├── 📜 Default.vue 
 └── 📜 Error.vue

Default

The pages you create will automatically appear in the default layout (src/layouts/Default.vue), featuring the main content in the center, a side navigation menu, and a horizontal app bar at the top.

This layout is fully responsive, and on mobile devices, the side menu transforms into a collapsible dropdown for easy access.

Header

There are two header types available: standard and sticky.

The Sticky header remains fixed in place as you scroll down the page, ensuring easy access to navigation at all times.

Sidebar

Onomis offers various layout options, including default (classic), compact, and detached side menus, each with its own unique features. Check out the Demo to explore them all.

• The Compact sidebar menu features a sleek expanding animation that activates on hover, enhancing your navigation experience.

• The Detached sidebar is set apart from the main content, giving the layout a cleaner and more organized look.

TIP

To view the potential customizations or adjustments, please refer to the details provided here:

• Default Layout

• Header

• Sidebar

Blank

This layout features no sidebar or header, making it perfect for designing authentication pages.

Related: Blank Layout

Error

This layout is designated to display error pages.

Related: Error Layout

navigation

This directory includes all the nav items.

The index.js file is imported in src/layout/Default.vue

navigation
 ├── 📜 Dashboards.js 
 ├── 📜 Charts.js
 ├── 📜 Elements.js
 ├── 📜 Forms.js
 ├── ...
 └── 📜 index.js // Includes all of the nav items

Related: Navigation Menu

pages

This directory contains your app pages. By adding a new file here, a new route will be automatically created based on the file's name and its path in the pages directory.

Here's an example 👀

1. Go to the src/pages/ directory

2. Create a new file : src/pages/home.vue

   <template>
     <h1>Home page</h1>
   </template>

3. Now, visit the /home route to see how the route is automatically generated based on your file name! 🕵️‍♂️

views

Large pages can be broken down into smaller chunks and saved in this folder.