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)
}
...
I'm new to Vue CLI, and I'm trying to build a small application. As part of this I want to generate some forms.
I've tested a few libraries, and NCForms seems to do all I need to do. (specifically, I need to handle capturing of multiple arrays).
I tried to initialize the library as described in the documentation - but it fails in the Template saying that it can't find some of the element-ui components.
I'm pretty sure that I've followed the instructions properly - but I must be missing something small.
My main.js file looks like this:
import 'ant-design-vue/lib/style/index.less' // antd core styles
import './#kit/vendors/antd/themes/default.less' // default theme antd components
import './#kit/vendors/antd/themes/dark.less' // dark theme antd components
import './global.scss' // app & third-party component styles
import Vue from 'vue'
import VuePageTitle from 'vue-page-title'
import NProgress from 'vue-nprogress'
import VueLayers from 'vuelayers'
import BootstrapVue from 'bootstrap-vue'
import VueFormulate from '#braid/vue-formulate'
// Form generator: Vue-Form-Generator: https://github.com/vue-generators/vue-form-generator
import VueFormGenerator from 'vue-form-generator'
import 'vue-form-generator/dist/vfg.css'
// Form generator: NCForms: https://github.com/ncform/ncform
import vueNcform from '#ncform/ncform'
// eslint-disable-next-line no-unused-vars
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import ncformStdComps from '#ncform/ncform-theme-elementui'
// REST Calls: Axios: https://github.com/axios/axios
import axios from 'axios'
// Local files
import App from './App.vue'
import router from './router'
import store from './store'
import { i18n } from './localization'
import './antd'
import './registerServiceWorker'
// mocking api
import './services/axios/fakeApi'
Vue.use(BootstrapVue)
Vue.use(VueLayers)
Vue.use(NProgress)
Vue.use(VuePageTitle, {
prefix: 'Nedbank PhishTank | ',
router,
})
// Form generator: Vue-Form-Generator
Vue.use(VueFormGenerator)
// Form generator: NCForms
Vue.use(vueNcform, { extComponents: ncformStdComps, lang: 'en' })
window.$http = Vue.prototype.$http = axios
Vue.use(VueFormulate)
Vue.config.productionTip = false
const nprogress = new NProgress({ parent: 'body' })
new Vue({
router,
store,
nprogress,
i18n,
render: h => h(App),
}).$mount('#app')
My template looks like this:
<template>
<div>
<ncform :form-schema="formSchema" form-name="settings-form" v-model="item" #submit="submit()"></ncform>
<el-button #click="submit()">Submit</el-button>
</div>
</template>
<script>
export default {
data() {
return {
formSchema: {
type: 'object',
properties: {
name: {
type: 'string',
},
},
},
item: {
name: 'Peter Pan',
},
}
},
methods: {
submit () {
this.$ncformValidate('settings-form').then(data => {
if (data.result) {
console.log(this.$data.formSchema.value)
// do what you like to do
alert('finally!!!')
}
})
},
},
}
</script>
The error is:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Am I missing something like registering the individual components? I thought this line would take care of it: Vue.use(vueNcform, { extComponents: ncformStdComps, lang: 'en' })
It feels like I should put something into the "new Vue()" statement - but I'm not sure what....
In main.js, you need to specify: Vue.use(Element);
I am trying to do a multi-language site with Vue.js, but I don't know how to call the const i18n or how to refer to it. I already tried the eventBus option, but I think this is not the right choice. I'm using vue-router.
Navbar.vue
<template>
<a v-on:click="changeLocale">EN</a>
</template>
<script>
export default {
methods: {
changeLocale: function() {
console.log("es");
i18n.locale = "es";
}
}
};
</script>
main.js
import VueI18n from 'vue-i18n';
import VueRouter from 'vue-router';
import App from './App.vue';
import {routes} from './routes.js';
import {messages} from './i18n.js';
Vue.use(VueRouter);
Vue.use(VueI18n);
const router = new VueRouter({
routes,
mode: 'history'
});
const i18n = new VueI18n({
locale: 'en',
messages
});
new Vue({
el: '#app',
router,
i18n,
render: h => h(App)
});
App.vue
<template>
<div>
<navbar></navbar>
<router-view></router-view>
<footer-part></footer-part>
</div>
</template>
<script>
import Navbar from './components/site/Navbar.vue';
import Footer from './components/site/Footer.vue';
export default {
components: {
'navbar' : Navbar,
'footer-part' : Footer
}
}
</script>
You should prefix it using $ sign and this keyword :
this.$i18n.locale = "es";
I have setup Vuetify on my Vue webpack application.
My project is setup with vue init webpack my-project running Vue 2.5.2 and using Vuetify 2.0.2.
I have installed Vuetify in my App.js
import Vue from 'vue'
import '../node_modules/vuetify/dist/vuetify.min.css';
import App from './App'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
Everything seems to be working fine. I'm able to call Vuetifycomponents in one of my components.
<template>
<v-container>
<v-card width="400" height="150" raised>
<h4>Hello</h4>
</v-card>
</v-container>
</template>
I then read that I need to wrap my App.js with the v-app component, but when I do that I get an error saying: Error: Vuetify is not properly initialized.
<template>
<div id="app">
<v-app>
<NavigationBar />
<v-content>
<router-view />
</v-content>
</v-app>
</div>
</template>
Maybe Vuetify isn't installed correctly, I hope some of you can bring some light on my issue.
There is lot of changes with new version.
try this
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
new Vue({
vuetify : new Vuetify(),
...
});
good luck
I do it this way (vue 3.9, vuetify 2.0)
In main.js (or App.js)
import vuetify from './plugins/vuetify'
...
new Vue({
...
vuetify,
render: h => h(App)
}).$mount('#app')
In plugins/vuetify.js
import Vue from "vue"
import Vuetify from "vuetify/lib"
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'md', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
},
theme: {
dark: false,
},
themes: {
light: {
primary: "#4682b4",
secondary: "#b0bec5",
accent: "#8c9eff",
error: "#b71c1c",
},
},
})
in App.vue
<template>
<v-app>
...
</v-app>
</template>
If you are using vue-cli, Add these lines to file index.html after meta tags:
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
And your main.js should look like this:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
Vue.config.productionTip = false
Vue.use(Vuetify)
export default new Vuetify({ })
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
vuetify: new Vuetify(),
components: { App },
template: '<App/>'
})
Patrice has one of my preferred finely tailored answers, depending on configuration, this may be what you need:
webpack | vue 2.5+ | vuetify 2.1+
In your main.js/App.js
import Vue from 'vue'
import router from './router'
import vuetify from './plugins/vuetify' // path to vuetify export
//Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
router,
vuetify,
});
In your plugins/vuetify.js
// resources/js/plugins/vuetify.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify({
icons: {
iconfont: 'md', // default - only for display purposes
},
})
In your EaxmpleComponent.vue and all other vue files:
Wrap all vue components in v-app and template tag like:
<template>
<v-app>
...
</v-app>
</template>
I had encountered same issue.
vuetify#2.3.2
vue#2.6.11
nuxt#2.13.0
+ typescript
I got solved with below.
[layouts/default.vue]
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import Vuetify from 'vuetify'
#Component({
vuetify:new Vuetify()
})
export default class extends Vue {
}
</script>
if you not typescript
below helps you.
<script>
import Vuetify from 'vuetify'
export default {
vuetify: new Vuetify(),
}
</script>
Try adding:
const opts = {
theme: {
dark: true,
themes: {
light: {
primary: '...',
...
},
dark: {
primary: '...',
...
}
}
}
}
and
new Vue({
el: '#app',
router,
store,
vuetify: new Vuetify(opts),
render: h => h(App)
})
to your main.js.
When adding vuetify (2.x) to gridsome, I had the same problem and had to add the vuetify import object to appOptions in main.js:
appOptions.vuetify = new Vuetify({})
as described in:
https://github.com/gridsome/gridsome.org/blob/master/docs/assets-css.md
and
https://github.com/gridsome/gridsome/issues/603#issuecomment-567056678
Below link Helped me.
https://www.codetd.com/en/article/7261224
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.config.productionTip = false
Vue.use(Vuetify)
// vuetify 自定义配置
export default new Vuetify({})
new Vue({
router,
store,
vuetify: new Vuetify(),
render: h => h(App)
}).$mount('#app')
I have a new vue-cli webpack project using Vuex. I've initialized my Vuex store in store.js like this:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {}
});
export default store;
In my App.vue I am importing store from './store.js' which works just fine, but this.$store is undefined. What am I missing?
Here is my App.vue
<script>
import Navigation from "#/components/Navigation";
import axios from "axios";
import store from "./store";
export default {
created() {
console.log("store from $store", this.$store);
console.log("store from store: ", store);
}
}
</script>
The second console.log(store) works just fine.
I found the solution. In my main.js I was not setting the store on the Vue instance. For anyone else that ever gets stuck on this, here's what you need:
main.js
import Vue from "vue";
import App from "./App";
import router from "./router";
import store from "./store"; // this
require("./assets/styles/main.scss");
Vue.config.productionTip = false;
new Vue({
el: "#app",
router,
store, // and this
components: { App },
template: "<App/>"
});