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();
});
