How to best resolve the warning: Failed to resolve component: v-treeview
, which results in a failure to render the desired treeview component?
I've tried the top suggestions in answers here, including specifically importing the components and directives and passing them to createVuetify
in both the plugin and main files, (also suggested in the "Getting Started" docs.) I've tried turning off cache, downgrading vuetify, deleting node_modules
and reinstalling, and some other things that either didn't work or broke everything.
Using
"vue": "^3.2.38"
"vuetify": "^3.0.0-beta.10"
src/plugins/veutify.js (created by vite or vuecli)
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
export default createVuetify(
)
src/main.js (created by vite/vuecli)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
loadFonts()
createApp(App)
.use(router)
.use(vuetify)
.mount('#app')
Fields.vue (custom)
<template>
<div>
<v-treeview :items="structure" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
...
// structure = [{name:'...',id:'...'},...]
const structure = ref([])
...
onMounted(async () => {
...
structure.value = await parseStructure(j)
}
...