Use Vue 3 Render Function With vuetify 3 beta

1.2k views Asked by At

Hello every One I Have Some Problem That I beleive It Came From Vite Complier i use vue 3 & vite with vuetify 3 beta And i need to use render function with vuetify But every Time I try to import vuetify component i get this error enter image description here

But the file does exist

Here Is My Code : RenderFunc.js

 <script>
import { h } from "vue";

import { VCard } from 'vuetify/lib/components';
export default {
  props: {
    level: {
      default: 1
    }
  },
  setup({ level }, { slots }) {
    return () => h(VCard, 'hello')
  }
};
   </script>

And This Is My Vite Config That i believe the fix it in

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
import vuetify from 'vite-plugin-vuetify'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
        vue(),
        vuetify({ autoImport: true }),
],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

And This My Main.js file

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import { createPinia } from 'pinia'
import { loadFonts } from './plugins/webfontloader'


loadFonts()
createApp(App)
  .use(router)
  .use(vuetify)
  .use(i18n)
  .use(createPinia())
  .mount('#app')

and this my vuetify plugin file

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Vuetify
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme:{
    themes:{
      light:{
        colors:{
          background: '#F9F9F9'
        }
      }
    }
  }
}
)

So Any One Can help how can i find the solution

1

There are 1 answers

0
Yazan Haffar On

Fixed my own problem, the whole thing was about the import path of Vuetify components in src/plugins/vuetify.js

I just used

import * as components from 'vuetify/components'

instead of

import * as components from 'vuetify/lib/components'

Hope it help you too