Creating Project
This guide will lead you through the essential steps of creating Vue project from scratch.
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 an Vue Project
Using
vite-ts
template create new Vue Vite project with typescript support.
npm create vite@latest metronic-vue-tailwind -- --template vue-ts
cd metronic-vue-tailwind
3
Install dependencies
Install dependencies and devDependencies using the following command:
npm install @popperjs/core && npm install --D tailwindcss postcss autoprefixer mini-svg-data-uri postcss-import postcss-loader postcss-nesting postcss-preset-env
The command will install the core mandatory dependencies needed to get started with Metronic. If you want to use
apexcharts
,
axios
, or
clipboard
, they must be installed separately.
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 Styles
This guide provides a detailed walkthrough of the key steps required to
integrate the Metronic Tailwind CSS stylesheet into your Vue project.
1
Copy Source Folder
Copy the
src
folder from the
metronic-tailwind-html
package and paste it into the
metronic-vue-tailwind/src
directory.
Rename the copied folder to
theme
. The directory structure should now look like this:
metroinc-vue-tailwind/src/theme
This step imports the necessary styles and assets from the original HTML package into your Vue project.
2
Import Styles
Open the Vue main style file
/src/styles.css
and add the following import statement:
@import "./theme/vendors/keenicons/duotone/style.css";
@import "./theme/vendors/keenicons/filled/style.css";
@import "./theme/vendors/keenicons/solid/style.css";
@import "./theme/vendors/keenicons/outline/style.css";
@import "./theme/css/styles.css";
#app {
display: contents;
}
This step ensures that the styles and icon fonts are properly imported and applied to your Vue project.
3
Copy Postcss Configuration
Copy
postcss.config.js
from
Metronic-html-tailwind/
and paste it to
metronic-vue-tailwind
.
Replace named export with the default export
export default {
plugins: {
'tailwindcss': {},
'autoprefixer': {},
// ...
},
}
4
Copy Tailwind Configuration
Copy the
tailwind.config.js
file from the
metronic-tailwind-html
package to the root of your
Vue project.
Edit the file and update the following content to the
content
and
plugins
array:
// ...
content: ['./index.html', './src/**/*.{js,ts,vue}'],
// ...
// ...
plugins: [
require('./src/theme/core/plugins/plugin'),
require('./src/theme/core/plugins/layouts/demo1'),
require('./src/theme/core/plugins/components/theme'),
require('./src/theme/core/plugins/components/breakpoints'),
require('./src/theme/core/plugins/components/typography'),
require('./src/theme/core/plugins/components/menu'),
require('./src/theme/core/plugins/components/dropdown'),
require('./src/theme/core/plugins/components/accordion'),
require('./src/theme/core/plugins/components/input'),
require('./src/theme/core/plugins/components/input-group'),
require('./src/theme/core/plugins/components/select'),
require('./src/theme/core/plugins/components/textarea'),
require('./src/theme/core/plugins/components/file-input'),
require('./src/theme/core/plugins/components/switch'),
require('./src/theme/core/plugins/components/checkbox'),
require('./src/theme/core/plugins/components/radio'),
require('./src/theme/core/plugins/components/range'),
require('./src/theme/core/plugins/components/container'),
require('./src/theme/core/plugins/components/image-input'),
require('./src/theme/core/plugins/components/modal'),
require('./src/theme/core/plugins/components/drawer'),
require('./src/theme/core/plugins/components/tooltip'),
require('./src/theme/core/plugins/components/popover'),
require('./src/theme/core/plugins/components/btn'),
require('./src/theme/core/plugins/components/btn-group'),
require('./src/theme/core/plugins/components/tabs'),
require('./src/theme/core/plugins/components/pagination'),
require('./src/theme/core/plugins/components/card'),
require('./src/theme/core/plugins/components/table'),
require('./src/theme/core/plugins/components/badge'),
require('./src/theme/core/plugins/components/rating'),
require('./src/theme/core/plugins/components/scrollable'),
require('./src/theme/core/plugins/components/progress'),
require('./src/theme/core/plugins/components/apexcharts'),
require('./src/theme/core/plugins/components/leaflet')
]
// ...
This step configures Tailwind CSS to scan and process your Vue project files, and it also integrates additional
Metronic plugins.
Setup Static Files
This guide will help you to configuring static
index.html
and media resources in Vue.
1
Integrate Theme Mode Initialization Script
To set up theme mode initialization in your project, copy the
index.html
content below,
which includes the theme mode initialization script and necessary classes, and paste it into your
metronic-vue-tailwind/index.html
file.
<!doctype html>
<html class="h-full light" data-theme="true" lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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-theme-mode")) {
themeMode = document.documentElement.getAttribute("data-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 type="module" src="/src/main.ts"></script>
</body>
</html>
2
Setup Media
Copy the media folder from
metronic-tailwind-html/dist/assets
and paste it into
metronic-vue-tailwind/public
.
Then you can reference these files in your components using paths like
/media/avatars/300-1.png
.
Integrate Core
This guide provides a detailed walkthrough of the key steps required to
integrate the Metronic core components into your Vue project.
1
Initialize global typescript components
In file
metronic-vue-tailwind/App.ts
add script section with the initialization code in onMounted hook.
// App.ts
import { nextTick, onMounted } from 'vue';
import KTComponent from './theme/core/index.spa';
import KTLayout from './theme/app/layouts/demo1.js';
onMounted(() => {
nextTick(() => {
KTComponent.init();
KTLayout.init();
});
});
2
Using typescript initialization with Vue-router
To use typescript components in combination with
vue-router
, the component initialization must be triggered on every page change within
beforeEach
event.
// index.ts
import KTComponent from '../theme/core/index.spa';
import KTLayout from '../theme/app/layouts/demo1.js';
router.beforeEach(() => {
KTComponent.init();
KTLayout.init();
});