Vuetify Integration & Menu
Hello,
yesterday I bought your metronic 8 dashboard admin Theme.
Well, Normally, we are working with Vuetify component Framework.
1. I asked myself, if its a problem to implement/ import vuetify framework and the best way to do it. In the app.js or main.ts? Maybe you have a tip?
2. On the left sidebar, we have to integrate 8 to 10 Selectboxes (Vuetify selectbox components). I hope, this should be also not that complex ?
Thank you very much for your response
Replies (4)
Hi,
Thank you for reaching out to us.
Yes, you can easily add Vuetify to our theme by following the steps below.
- Install Vuetify dependencies yarn add vuetify@^3.3.9.
- If you want to use Vuetify globally you can add Vuefiy in main.ts.
import { createApp } from "vue"
import App from "./App.vue"
// Vuetify
import "vuetify/styles"
import { createVuetify } from "vuetify"
import * as components from "vuetify/components"
import * as directives from "vuetify/directives"
const vuetify = createVuetify({
components,
directives,
})
createApp(App).use(vuetify).mount("#app") - Then you can use Vuetify components in any of the theme vue components.
You can refer to page in Vuetify official docs.
https://vuetifyjs.com/en/
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thanks for your prompt answer. I did it as you describe. Seems to work fine, but one problem:
in all of the vuetify components, the icons are not shown (e.g. the checkbox icons etc.). Is it maybe a conflict with your template? Do I have to install / import something. What I see is, that vuetify uses the "mdi" icons and this icon set seems not there. Maybe you can help me once more.
Ok. I solved the problem.
As I said before, it is neccessary to install the mdi icon
npm install @mdi/font
and in main.ts
import "@mdi/font/css/materialdesignicons.css";
Hi,
Glad to hear you have already fixed this. All the best with your project!
Please don't hesitate to reach out if you need anything more from us.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
