### Install Dependencies with npm Source: https://tailwind-admin.github.io/tailwind-admin-documentation/premium-documentation/vuejs/docs-start Installs project dependencies using npm. Ensure you have Node.js and npm installed. This command should be run from the project's root directory. ```bash cd project-folder npm install ``` -------------------------------- ### Install Dependencies with yarn Source: https://tailwind-admin.github.io/tailwind-admin-documentation/premium-documentation/vuejs/docs-start Installs project dependencies using yarn. This is an alternative to npm for package management. Run this command from the project's root directory. ```bash cd project-folder yarn install ``` -------------------------------- ### Install Dependencies with pnpm Source: https://tailwind-admin.github.io/tailwind-admin-documentation/premium-documentation/vuejs/docs-start Installs project dependencies using pnpm. pnpm is a performant alternative to npm and yarn. Execute this command in the project's root directory. ```bash cd project-folder pnpm install ``` -------------------------------- ### Build Application for Deployment Source: https://tailwind-admin.github.io/tailwind-admin-documentation/premium-documentation/vuejs/docs-start Builds the Tailwind Admin application for production deployment. This command is used after the development setup is complete and prepares the project for static hosting or server deployment. ```bash npm run build or yarn build or pnpm build ``` -------------------------------- ### Start Development Server (npm, yarn, pnpm) Source: https://tailwind-admin.github.io/tailwind-admin-documentation/free-documentation/vuejs/docs-start Starts the local development server for Tailwind Admin. This command compiles assets and provides a live preview of the application at http://localhost:5173. It's recommended to use Node.js v20+ and npm v10+. ```bash npm run dev ``` ```bash yarn dev ``` ```bash pnpm dev ``` -------------------------------- ### Start Development Server Source: https://tailwind-admin.github.io/tailwind-admin-documentation/premium-documentation/vuejs/docs-start Starts the local development server for the Tailwind Admin project. This command can be executed using npm, yarn, or pnpm. It typically launches the application at http://localhost:5173. ```bash npm run dev or yarn dev or pnpm dev ``` -------------------------------- ### Install Project Dependencies (npm, yarn, pnpm) Source: https://tailwind-admin.github.io/tailwind-admin-documentation/free-documentation/vuejs/docs-start Installs project dependencies using npm, yarn, or pnpm. Ensure you have Node.js and the respective package manager installed. This step is crucial before running the development server or building the project. ```bash cd project-folder npm install ``` ```bash cd project-folder yarn install ``` ```bash cd project-folder pnpm install ``` -------------------------------- ### Add Sidebar Items in Vue Source: https://tailwind-admin.github.io/tailwind-admin-documentation/free-documentation/vuejs/docs-routing Configures the items displayed in the vertical sidebar. Each item has a title, icon, and a destination path (`to`). Some items are marked as 'pro' indicating premium features. ```typescript // ------------------------------------------------------------------------ // File: /src/layouts/full/vertical-sidebar/sidebarItem.ts // ------------------------------------------------------------------------ const sidebarItem: menu[] = [ { header: 'DASHBOARD' }, { title: "Modern", icon: "home-smile-linear", to: "/", isPro: false, }, { title: "eCommerce", icon: "bag-5-linear", to: "https://tailwindadmin-vuejs-main.netlify.app/dashboards/eCommerce", isPro: true, }, { title: "Music", icon: "music-note-linear", to: "https://tailwindadmin-vuejs-main.netlify.app/dashboards/music", isPro: true, }, ] ``` -------------------------------- ### Build Project for Deployment (npm, yarn, pnpm) Source: https://tailwind-admin.github.io/tailwind-admin-documentation/free-documentation/vuejs/docs-start Builds the Tailwind Admin project for production deployment. This command optimizes assets and generates static files. After running this, the application is ready to be deployed to a hosting environment. ```bash npm run build ``` ```bash yarn build ``` ```bash pnpm build ``` -------------------------------- ### Configure Routes in Vue Router Source: https://tailwind-admin.github.io/tailwind-admin-documentation/free-documentation/vuejs/docs-routing Defines the main routing configuration for the application. It sets up a base path and includes children routes for different views. This file is essential for navigating between different pages in the application. ```typescript // ------------------------------------------------------------------------ // File: src/router/MainRoutes.ts // ------------------------------------------------------------------------ const MainRoutes = { path: '/', component: () => import('@/layouts/full/FullLayout.vue'), children: [ { name: 'Modern', path: '/', component: () => import('@/views/dashboards/Modern.vue') }, { name: 'Notes', path: '/apps/notes', component: () => import('../views/apps/notes/Notes.vue') }, { name: 'Tickets', path: '/apps/tickets', component: () => import('../views/apps/tickets/Tickets.vue') }, /* ***import rest of your Pages*** */ ] } ``` -------------------------------- ### Setup Main Routes in Vue Router Source: https://tailwind-admin.github.io/tailwind-admin-documentation/premium-documentation/vuejs/docs-routing Defines the main application routes using Vue Router. It specifies the layout component and child routes for different dashboard views. This configuration is essential for navigating between different sections of the application. ```typescript // ---------------------------------------------------- // File: src/router/MainRoutes.ts // ---------------------------------------------------- const MainRoutes = { path: '/', component: () => import('@/layouts/full/FullLayout.vue'), children: [ { name: 'Modern', path: '/', component: () => import('@/views/dashboards/Modern.vue') }, { name: 'eCommerce', path: '/dashboards/eCommerce', component: () => import('@/views/dashboards/Ecommerce.vue') }, { name: 'General', path: '/dashboards/general', component: () => import('@/views/dashboards/General.vue') }, /* ***import rest of your Pages*** */ ] } ``` -------------------------------- ### Configure Default Theme Settings in config.ts Source: https://tailwind-admin.github.io/tailwind-admin-documentation/free-documentation/vuejs/docs-setting Sets the default configuration for the Tailwind Admin template. This includes sidebar visibility, customizer drawer state, mini-sidebar status, layout orientation (horizontal/RTL), active theme, boxed layout, border card, theme mode (light/dark), and border radius. This file is essential for initial setup. ```typescript // ---------------------------------------------------- // File: /src/config.ts // ---------------------------------------------------- const config : ConfigProps = { Sidebar_drawer: null, Customizer_drawer: false, mini_sidebar: false,setHorizontalLayout: false, // Horizontal layout setRTLLayout: false, // RTL layout actTheme: "BLUE_THEME", boxed:true, setBorderCard: false, themeMode: "light", // light / dark borderRadius: 8, }; ``` -------------------------------- ### Add Page to Vertical Sidebar Navigation Source: https://tailwind-admin.github.io/tailwind-admin-documentation/premium-documentation/vuejs/docs-routing Configures items for the vertical sidebar navigation. Each item includes a title, an icon, and a 'to' path. This setup allows users to navigate to different dashboard views directly from the sidebar. ```typescript // ------------------------------------------------------------------------ // File: /src/layouts/full/vertical-sidebar/sidebarItem.ts // ------------------------------------------------------------------------ const sidebarItem: menu[] = [ { header: 'DASHBOARD' }, { title: 'Modern', icon: 'home-smile-linear', to: '/' }, { title: 'eCommerce', icon: 'bag-5-linear', to: '/dashboards/ecommerce' }, { title: 'General', icon: 'help-line-duotone', to: '/dashboards/general' }, ] ``` -------------------------------- ### Add Locale JSON Files for Multi-Language Support Source: https://tailwind-admin.github.io/tailwind-admin-documentation/premium-documentation/vuejs/docs-multi-language This snippet demonstrates how to create JSON files for different languages (Arabic, English, Chinese, French) to manage translations. Each file contains key-value pairs for UI elements. These files serve as the data source for the i18n library. ```json // ---------------------------------------------------- // File: src/utils/locales/ar.json // ---------------------------------------------------- { "Modern": "عصري", "Contacts":"جهات الاتصال", "Chats":"الدردشات" } // ---------------------------------------------------- // File: src/utils/locales/en.json // ---------------------------------------------------- { "Modern": "Modern", "Contacts":"Contacts", "Chats":"Chats" } // ---------------------------------------------------- // File: src/utils/locales/zh.json // ---------------------------------------------------- { "Modern": "現代的", "Contacts":"聯繫人", "Chats":"聊天記錄" } // ---------------------------------------------------- // File: src/utils/locales/fr.json // ---------------------------------------------------- { "Modern": "Moderne", "Contacts":"Les contacts", "Chats":"Chattes" } ``` -------------------------------- ### Add Locale Files for Multi-Language Support Source: https://tailwind-admin.github.io/tailwind-admin-documentation/free-documentation/vuejs/docs-multi-language This snippet demonstrates how to add locale files for different languages (Arabic, English, Chinese, French) in JSON format. These files contain key-value pairs for translations, enabling multi-language functionality in the application. Ensure correct JSON syntax for each file. ```json // ---------------------------------------------------- // File: src/utils/locales/ar.json // ---------------------------------------------------- { "Modern": "عصري", "Contacts":"جهات الاتصال", "Chats":"الدردشات" } // ---------------------------------------------------- // File: src/utils/locales/en.json // ---------------------------------------------------- { "Modern": "Modern", "Contacts":"Contacts", "Chats":"Chats" } // ---------------------------------------------------- // File: src/utils/locales/zh.json // ---------------------------------------------------- { "Modern": "現代的", "Contacts":"聯繫人", "Chats":"聊天記錄" } // ---------------------------------------------------- // File: src/utils/locales/fr.json // ---------------------------------------------------- { "Modern": "Moderne", "Contacts":"Les contacts", "Chats":"Chattes" } ``` -------------------------------- ### Display Solar Icons with Iconify in Vue.js Source: https://tailwind-admin.github.io/tailwind-admin-documentation/free-documentation/vuejs/docs-icon This snippet shows how to import and use the Icon component from '@iconify/vue' to display Solar Icons. It requires the '@iconify/vue' package. The input is the icon name and desired height, and the output is the rendered icon. ```javascript import { Icon } from "@iconify/vue"; ``` ```html