How to use vue-based ui libraries like vuetify & vue plugins

[TechAkayy]

Hi there,

Curious to know if its possible to use UI libraries like vuetify with Iles. In a typical Vue SPA, it's added like yet another vue plugin - app.use(vuetify) - dependency injection from the top-level.

import 'vuetify/styles' // Global CSS has to be imported
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import App from './App.vue'

const app = createApp(App)
const vuetify = createVuetify(...) // Replaces new Vuetify(...)

app.use(vuetify)

app.mount('#app')

[TechAkayy]

Ok. With regards to my above question, I did find the answer - I could use this Iles api - https://iles-docs.netlify.app/config#enhanceapp

But, I did find something odd, for which I have logged a new issue - #180. Thank you!

[ElMassimo]

Correct, enhanceApp is an extension point that allows to customize the Vue app and inject plugins.

[ElMassimo]

It's possible to add Vuetify, and any other Vue plugins by using enhanceApp:

import { defineConfig } from 'iles'
import { createVuetify } from 'vuetify'

export default defineConfig({
  enhanceApp ({ app }) {
	const vuetify = createVuetify()
    app.use(vuetify)
  },
})