TailAdmin Vue Admin Dashboard Template

TailAdmin Vue is built using a modern web development stack:

• Vue 3.x (Vite): Uses the Composition API and Vite for fast development and optimized builds.
• Tailwind CSS 4.x: Provides utility-first styling.
• TypeScript: For type-safe development.
• Pinia: For state management.
• Vue Router: For application routing.
• ApexCharts: For data visualization and analytics.
• @vueuse/core: For reactive utilities.
• JSVectorMap: For interactive vector maps.

Before installing, ensure your environment meets the following requirements:

• Node.js: version 18.x or later (Node.js 20.x or later is recommended).
• IDE Setup: VSCode with the Volar extension is highly recommended.
• TypeScript Configuration: To ensure proper type support for .vue imports, the project uses vue-tsc instead of the standard tsc CLI. Volar is required in your editor to make the TypeScript language service aware of .vue types.

To set up the TailAdmin Vue dashboard template, follow these steps:

1. Clone the repository:

   git clone https://github.com/TailAdmin/vue-tailwind-admin-dashboard.git

   Note for Windows users: Place the repository near the root of your drive if you encounter cloning issues.

2. Install dependencies:

   npm install
   # or
   yarn install

3. Start the development server:

   npm run dev
   # or
   yarn dev

4. Build for production:

   npm run build
   # or
   yarn build

The router implements a global beforeEach guard that automatically updates the browser's document.title whenever a navigation occurs.

It uses the meta.title property defined in the route configuration to construct the title using the following pattern: Vue.js {to.meta.title} | TailAdmin - Vue.js Tailwind CSS Dashboard Template.

If a route does not define a meta.title, the title update may result in undefined appearing in the browser tab. Always include a meta.title in your route definitions for consistent branding.

The root application component (App.vue) establishes the global layout context by wrapping the application's router view with two primary providers:

1. ThemeProvider: Manages the application's visual theme (e.g., light/dark mode).
2. SidebarProvider: Manages the state and visibility of the sidebar component.

All routes rendered via <RouterView /> will inherit the theme and sidebar context provided by these wrappers.

<template>
  <ThemeProvider>
    <SidebarProvider>
      <RouterView />
    </SidebarProvider>
  </ThemeProvider>
</template>

When setRTL is called, the composable dispatches a rtl-changed event on the window object. This allows non-Vue parts of your application or other components to react to direction changes. The event detail contains the new state.

window.addEventListener('rtl-changed', (event: any) => {
  const { isRtl, dir } = event.detail;
  console.log(`Direction changed to ${dir}. Is RTL: ${isRtl}`);
});

The DropdownMenu component includes intelligent positioning logic to prevent the menu from being cut off by the viewport or parent containers:

1. Automatic Upward Flip: If the component detects insufficient space below the trigger (relative to the viewport or the nearest scrollable parent like a table or .overflow-auto container), it automatically switches to an upward-opening mode (isUpward).
2. Forced Upward Mode: By setting the openUpward prop to true, you can force the menu to always open upwards.
3. Smart Class Calculation: When opening upward, the component modifies the menuClass by removing top-full and mt-* classes and applying bottom-full mb-1 top-auto! to ensure correct alignment.

The application is initialized by creating a Vue app instance, mounting it to the #app element, and registering core plugins including the router and vue3-apexcharts. Additionally, the initRTL() function must be called to initialize Right-to-Left (RTL) support for the dashboard layout.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueApexCharts from 'vue3-apexcharts'
import { initRTL } from './composables/useRTL'

// Initialize RTL support
initRTL()

const app = createApp(App)

app.use(router)
app.use(VueApexCharts)

app.mount('#app')

Wrap your application (or a specific component tree) with the ThemeProvider component to enable theme management. The provider handles persisting the theme preference to localStorage under the key theme and automatically toggles the dark class on the document.documentElement to support Tailwind CSS dark mode.

<template>
  <ThemeProvider>
    <App />
  </ThemeProvider>
</template>

<script setup>
import ThemeProvider from './components/layout/ThemeProvider.vue'
</script>

By default, the ESLint configuration is set up for TypeScript (ts). If you need to support other languages like tsx within your .vue files, you must use configureVueProject from @vue/eslint-config-typescript.

Uncomment and use the following pattern in eslint.config.ts to enable support for tsx alongside ts:

import { configureVueProject } from '@vue/eslint-config-typescript'

configureVueProject({ scriptLangs: ['ts', 'tsx'] })

TailAdmin Vue is available in two tiers: