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.
