Download
Download the Metronic Integration Examples to get started.
This integration example uses Vue 3.5.13 with TypeScript.
Download the Metronic Integration Examples from our GitHub repository.
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 into your Vue src directory and rename it to metronic.
In
src/metronic/core, delete index.ts and rename index.spa.ts to index.ts.
Remove
KTLayout initialization from src/metronic/app/layouts/demo1.js:
KTDom.ready(() => {
KTLayout.init();
});
Update import paths in
src/metronic/css/styles.css:
/* Tailwind core */
@import 'tailwindcss';
/* Tailwind scan sources */
@source '@keenthemes/ktui/styles.css';
/* Theme configs */
@import "./config.ktui.css";
/* KTUI styles */
@import '@keenthemes/ktui/styles.css';
/* Metronic components */
@import "./components/index.css";
/* Demos */
@import "./demos/demo1.css";
2
Copy Media Folder
Copy the
media folder from metronic-tailwind-html/dist/assets/media to your Vue project's public directory.
3
Install Packages & Start Development Server
Install packages and start the development server:
npm install
npm run dev
That's it! The Metronic Tailwind template is now integrated into your Vue project.
Creating Project
Create a Vue project from scratch, ready for Metronic & KTUI integration.
1
Install Node.js and Npm
Ensure you have Node.js and npm installed on your machine.
2
Create a Vue Project
Use the Vite template to create a new Vue project with TypeScript support:
npm create vite@latest metronic-vue -- --template vue-ts
cd metronic-vue
3
Install dependencies
Install dependencies using the following command:
npm install @keenthemes/ktui @popperjs/core
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.
Integrate Metronic & KTUI with Vue
Integrate Metronic and KTUI into your Vue project. Tailwind CSS is not required.
1
Navigate to Vue Project
Navigate to your Vue project folder.
cd your-vue-project
2
Install Dependencies
Run the following command to install KTUI and required dependencies:
npm install @keenthemes/ktui @popperjs/core
3
Copy Metronic Source Files
Copy the
src folder from your Metronic HTML package to a suitable location in your Vue project, such as src/assets/metronic.
4
Copy Media Assets
Copy the
media folder from metronic-tailwind-html-demos/dist/assets/media to src/assets/media in your Vue project.
5
Import Metronic Styles
Edit
src/assets/styles.scss (or your main style file) and add:
@import "./metronic/css/styles.css";
@import "./metronic/css/demos/demo1.css";
/* Keenicons */
@import "./metronic/vendors/keenicons/duotone/style.css";
@import "./metronic/vendors/keenicons/filled/style.css";
@import "./metronic/vendors/keenicons/outline/style.css";
@import "./metronic/vendors/keenicons/solid/style.css";
6
Import KTUI and Metronic Scripts
In your main entry JS file (e.g.,
src/main.js or src/main.ts), add:
import "@keenthemes/ktui/dist/ktui.js";
import "./assets/metronic/core/index";
import "./assets/metronic/app/layouts/demo1";
7
Use Metronic HTML in Your Components
Copy the desired HTML markup (e.g., from
dist/html/demo1/index.html) into your Vue component templates. Adjust asset paths as needed (e.g., assets/metronic/...).
8
Start Development
Run the following command to start the Vue development server:
npm run serve
Visit
http://localhost:8080 (or your configured port) in your browser.
Setup Static Files
Configure static
index.html and media resources for your Vue project.
1
Integrate Theme Mode Initialization Script
Copy the following
index.html content to your public/index.html file:
<!DOCTYPE html>
<html class="h-full light" data-kt-theme="true" lang="en">
<head>
<meta charset="utf-8"/>
<link href="/vite.svg" rel="icon" type="image/svg+xml"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<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-kt-theme-mode")) {
themeMode = document.documentElement.getAttribute("data-kt-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 src="/src/main.ts" type="module">
</script>
</body>
</html>
2
Copy Media Folder
Copy the
media folder from the metronic-tailwind-html-demos/dist/assets/media directory into your Vue project's public directory.
Integrate Core
Integrate Metronic core components into your Vue project with KTUI.
1
Initialize Metronic Components in App.vue
In your
App.vue, add a script section with the initialization code in the onMounted hook:
// App.vue
import { nextTick, onMounted } from 'vue';
import KTComponent from './assets/metronic/core/index';
import KTLayout from './assets/metronic/app/layouts/demo1';
onMounted(() => {
nextTick(() => {
KTComponent.init();
KTLayout.init();
});
});
2
Using Initialization with Vue Router
To use Metronic components with vue-router, trigger the component initialization on every page change within the
beforeEach event:
// router/index.ts
import KTComponent from '../assets/metronic/core/index';
import KTLayout from '../assets/metronic/app/layouts/demo1';
router.beforeEach(() => {
KTComponent.init();
KTLayout.init();
});
