DocsFolder StructureVue

Vue.js File Structure

The TailAdmin Vue.js Template leverages Vue 3’s Composition API and Vite for a blazing fast development experience. The structure emphasizes modularity by separating views, components, and composables.

Root Directory

The root contains the Vite environment setup and your source code.

File / FolderDescription
src/Source Code: The heart of your Vue application.
public/Public Assets: Static resources served as-is.
vite.config.tsVite Config: Build settings and plugin configuration.
package.jsonProject Manifest: Dependencies and scripts.
tailwind.config.jsTailwind Config: Theme customization.
tsconfig.jsonTypeScript Config: Type checking rules.

Source Directory (src)

Inside src/, we follow standard Vue community conventions.

src/
assets/# Static assets (processed by Vite)
main.css# Global styles & Tailwind imports
components/# Reusable Vue Components
charts/# Data visualization
common/# Layout fragments
ui/# Base UI elements
composables/# Vue Composables
useSidebar.ts# Sidebar state logic
router/# Vue Router Configuration
index.ts# Route definitions
views/# Page-level Components
Dashboard/# Dashboard views
AnalyticsView.vue
ProfileView.vue
App.vue# Root Component
main.ts# Entry Point

Key Directories Explained

src/views/ vs src/components/

  • views/: Top-level page components mapped directly to routes. These act as controllers for the page.
  • components/: Reusable parts used inside Views. These should be generic and decoupled from specific business logic where possible.

src/composables/

Replacing Mixins, Composables allow you to reuse stateful logic nicely.

  • useSidebar.ts: Encapsulates the open/close state of the sidebar, making it accessible from any component.

src/router/

Contains the createRouter configuration. New pages should be registered here to be accessible via the browser URL.

Next.jsAngular