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