Metronic - Tailwind CSS Vue

Get started with your Vue project by downloading the Metronic integration examples from our GitHub repository . These examples provide a quick way to integrate the Metronic styles into your Vue project. This will give you a working starting point that you can customize to fit your needs.

Please note that the sample project does not include the Metronic Tailwind CSS source files by default. To integrate the styles, you need to copy the Metronic Tailwind CSS source files from your downloaded Metronic folder.

1

Copy Source Folder

Copy the

src

folder from the


            metronic-tailwind-html

package and paste it into the Vue

src

directory. Rename the copied folder to


            metronic

so that the directory structure should now look like this:


            src/metronic

. This step imports the necessary styles and assets from the original HTML package into your Vue project.

In the


            src/metronic/core

folder, delete the unnecessary


            index.ts

file. This file is not needed for Single Page Application (SPA) integration as it could cause conflicts. Instead, rename the


            index.spa.ts

file to


            index.ts

to ensure proper integration.

Replace html initialization with default instance export in


            src/metronic/app/layouts/demo1.js

.

Remove


            KTLayout

instance initialization from


            src/metronic/app/layouts/demo1.js

.

				
					KTDom.ready(() => {
KTLayout.init();
});

2

Copy Media Folder

Copy the


            media

folder from the


            metronic-tailwind-html

package's


            dist/assets/media

directory into your Vue project's


            public

directory.

3

Install Packages & Start Development Server

Install the required Node.js packages by running


            npm
    install

. Start the Vue development server by running


            npm run dev

.

				
					npm install
npm run dev

That's it! You now have the Metronic Tailwind template integrated into your Vue project.

This guide will lead you through the essential steps of creating Vue project from scratch.

1

Install Node.js and Npm

Before starting with Vue, ensure you have Node.js and npm (Node Package Manager) installed on your machine. Visit https://nodejs.org/ to download and install the latest version.

2

Create an Vue Project

Using vite-ts template create new Vue Vite project with typescript support.

				
					npm create vite@latest metronic-tailwind-vue -- --template vue-ts
cd metronic-tailwind-vue

3

Install dependencies

Install dependencies and devDependencies using the following command:

				
					npm install @popperjs/core && npm install --D tailwindcss postcss autoprefixer mini-svg-data-uri postcss-import postcss-loader postcss-nesting postcss-preset-env

The command will install the core mandatory dependencies needed to get started with Metronic. If you want to use apexcharts , axios , or clipboard , they must be installed separately.

4

Serve the Vue Application

Run the development server with the following command:

				
					npm run dev

Open your browser and navigate to


            http://localhost:5173/

to see your new Vue app in action.

This guide provides a detailed walkthrough of the key steps required to integrate the Metronic Tailwind CSS stylesheet into your Vue project.

1

Copy Source Folder

Copy the

src

folder from the


            metronic-tailwind-html

package and paste it into the Vue

src

directory. Rename the copied folder to


            metronic

so that the directory structure should now look like this:


            src/metronic

. This step imports the necessary styles and assets from the original HTML package into your Vue project.

In the


            src/metronic/core

folder, delete the unnecessary


            index.ts

file. This file is not needed for Single Page Application (SPA) integration as it could cause conflicts. Instead, rename the


            index.spa.ts

file to


            index.ts

to ensure proper integration.

Replace html initialization with default instance export in


            src/metronic/app/layouts/demo1.js

.

Remove


            KTLayout

instance initialization from


            src/metronic/app/layouts/demo1.js

.

				
					KTDom.ready(() => {
KTLayout.init();
});

2

Import Styles

Open the Vue main style file


            /src/styles.css

and add the following import statement:

				
					@import "./metronic/vendors/keenicons/duotone/style.css";
@import "./metronic/vendors/keenicons/filled/style.css";
@import "./metronic/vendors/keenicons/solid/style.css";
@import "./metronic/vendors/keenicons/outline/style.css";

@import "./metronic/css/styles.css";

#app {
display: contents;
}

This step ensures that the styles and icon fonts are properly imported and applied to your Vue project.

3

Copy Postcss Configuration

Copy


            postcss.config.js

from


            metronic-tailwind-html

and paste it to


            metronic-tailwind-vue

.

Replace named export with the default export

				
					export default {
plugins: {
'postcss-preset-env': {},
'postcss-import': {},
'tailwindcss/nesting': 'postcss-nesting',
'postcss-preset-env': {
features: { 'nesting-rules': false },
},
'tailwindcss': {},
'autoprefixer': {},
},
}

4

Copy Tailwind Configuration

Copy the


            tailwind.config.js

file from the


            metronic-tailwind-html

package to the root of your Vue project.

Edit the file and update the following content to the


            content

and


            plugins

array:

				
					// ...
content: ['./index.html', './src/**/*.{js,ts,vue}'],
// ...

				
					// ...
plugins: [
require('./src/metronic/core/plugins/plugin'),
require('./src/metronic/core/plugins/components/theme'),
require('./src/metronic/core/plugins/components/breakpoints'),
require('./src/metronic/core/plugins/components/typography'),
require('./src/metronic/core/plugins/components/menu'),
require('./src/metronic/core/plugins/components/dropdown'),
require('./src/metronic/core/plugins/components/accordion'),
require('./src/metronic/core/plugins/components/input'),
require('./src/metronic/core/plugins/components/input-group'),
require('./src/metronic/core/plugins/components/select'),
require('./src/metronic/core/plugins/components/textarea'),
require('./src/metronic/core/plugins/components/file-input'),
require('./src/metronic/core/plugins/components/switch'),
require('./src/metronic/core/plugins/components/checkbox'),
require('./src/metronic/core/plugins/components/radio'),
require('./src/metronic/core/plugins/components/range'),
require('./src/metronic/core/plugins/components/container'),
require('./src/metronic/core/plugins/components/image-input'),
require('./src/metronic/core/plugins/components/modal'),
require('./src/metronic/core/plugins/components/drawer'),
require('./src/metronic/core/plugins/components/tooltip'),
require('./src/metronic/core/plugins/components/popover'),
require('./src/metronic/core/plugins/components/btn'),
require('./src/metronic/core/plugins/components/btn-group'),
require('./src/metronic/core/plugins/components/tabs'),
require('./src/metronic/core/plugins/components/pagination'),
require('./src/metronic/core/plugins/components/card'),
require('./src/metronic/core/plugins/components/table'),
require('./src/metronic/core/plugins/components/badge'),
require('./src/metronic/core/plugins/components/rating'),
require('./src/metronic/core/plugins/components/scrollable'),
require('./src/metronic/core/plugins/components/progress'),
require('./src/metronic/core/plugins/components/apexcharts'),
require('./src/metronic/core/plugins/components/leaflet')
]
// ...

This step configures Tailwind CSS to scan and process your Vue project files, and it also integrates additional Metronic plugins.

This guide will help you to configuring static


         index.html

and media resources in Vue.

1

Integrate Theme Mode Initialization Script

To set up theme mode initialization in your project, copy the


            index.html

content below, which includes the theme mode initialization script and necessary classes, and paste it into your


            metronic-tailwind-vue/index.html

file.

				
					<!doctype html>
<html class="h-full light" data-theme="true" lang="en">
	<head>
		<meta charset="UTF-8" />
		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vite + Vue</title>
	</head>
	<body class="flex h-full demo1 sidebar-fixed header-fixed bg-[#fefefe] dark:bg-coal-500">
		<script>
			const defaultThemeMode = "light"; // light|dark|system
			let themeMode;

			if ( document.documentElement ) {
				if ( localStorage.getItem("theme")) {
					themeMode = localStorage.getItem("theme");
				} else if ( document.documentElement.hasAttribute("data-theme-mode")) {
					themeMode = document.documentElement.getAttribute("data-theme-mode");
				} else {
					themeMode = defaultThemeMode;
				}
				if (themeMode === "system") {
					themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
				}
				document.documentElement.classList.add(themeMode);
			}
		</script>
		<div id="app"></div>
		<script type="module" src="/src/main.ts"></script>
	</body>
</html>

2

Copy Media Folder

Copy the


            media

folder from the


            metronic-tailwind-html

package's


            dist/assets/media

directory into your Vue project's


            public

directory.

This guide provides a detailed walkthrough of the key steps required to integrate the Metronic core components into your Vue project.

1

Initialize global typescript components

In file


            metronic-tailwind-vue/App.vue

add script section with the initialization code in


            onMounted

hook.

				
					// App.vue
import { nextTick, onMounted } from 'vue';
import KTComponent from './metronic/core/index.spa';
import KTLayout from './metronic/app/layouts/demo1.js';

onMounted(() => {
	nextTick(() => {
		KTComponent.init();
		KTLayout.init();
	});
});

2

Using typescript initialization with Vue-router

To use typescript components in combination with vue-router , the component initialization must be triggered on every page change within


            beforeEach

event.

				
					// index.ts
import KTComponent from '../metronic/core/index.spa';
import KTLayout from '../metronic/app/layouts/demo1.js';

router.beforeEach(() => {
	KTComponent.init();
	KTLayout.init();
});

3

Disable Strict Mode

In the


            tsconfig.json

file, set the


            strict

property to


            false

.

				
					"strict": false,

Getting Started

Customization

Base Components

Navigation

Forms

Plugins

Vue

Download

Copy Source Folder

Copy Media Folder

Install Packages & Start Development Server

Creating Project

Install Node.js and Npm

Create an Vue Project

Install dependencies

Serve the Vue Application

Integrate Styles

Copy Source Folder

Import Styles

Copy Postcss Configuration

Copy Tailwind Configuration

Setup Static Files

Integrate Theme Mode Initialization Script

Copy Media Folder

Integrate Core

Initialize global typescript components

Using typescript initialization with Vue-router

Disable Strict Mode

On This Page

Getting Started

Customization

Base Components

Navigation

Forms

Plugins

Vue

​ Download

Copy Source Folder

Copy Media Folder

Install Packages & Start Development Server

​ Creating Project

Install Node.js and Npm

Create an Vue Project

Install dependencies

Serve the Vue Application

​ Integrate Styles

Copy Source Folder

Import Styles

Copy Postcss Configuration

Copy Tailwind Configuration

​ Setup Static Files

Integrate Theme Mode Initialization Script

Copy Media Folder

​ Integrate Core

Initialize global typescript components

Using typescript initialization with Vue-router

Disable Strict Mode

On This Page

Download

Creating Project

Integrate Styles

Setup Static Files

Integrate Core