Download
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.
Remove
KTLayout
instance initialization from
src/metronic/app/layouts/demo1.js
KTDom.ready(() => {
KTLayout.init();
});
Fix the import paths in
src/metronic/css/styles.css
so that the final paths look like this:
/* 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 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.
Creating Project
This guide will lead you through the essential steps of creating a Vue project from scratch, ready for Metronic & KTUI integration.
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 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
This guide will walk you through integrating Metronic and KTUI into your Vue project. Tailwind CSS is not required for this setup.
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/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
This guide will help you configure the static
index.html
and media resources for your Vue project with Metronic & KTUI.
1
Integrate Theme Mode Initialization Script
To set up theme mode initialization, copy the following
index.html
content (including the theme mode script and necessary classes) and paste it into 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/dist/assets/media
directory into your Vue project's
public
directory.
Integrate Core
This guide provides a detailed walkthrough of the key steps required to 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();
});
