I am using Vue 3 with Vuetify 3.0.1. I want to develop a Vue application based on Options API. While trying to make use of a simple v-dialog, I getting following error:
runtime-core.esm-bundler.js?d2dd:40 [Vue warn]: Unhandled error during execution of watcher callback
at <VOverlay ref=Ref< undefined > class="v-dialog" width="500" ... >
at <VDialog modelValue=false onUpdate:modelValue=fn width="500" >
at <VMain>
at <VApp>
at <App>
warn # runtime-core.esm-bundler.js?d2dd:40
runtime-core.esm-bundler.js?d2dd:40 [Vue warn]: Unhandled error during execution of setup function
at <VOverlay ref=Ref< undefined > class="v-dialog" width="500" ... >
at <VDialog modelValue=false onUpdate:modelValue=fn width="500" >
at <VMain>
at <VApp>
at <App>
Uncaught TypeError: globalStack.at is not a function
at eval (webpack-internal:///./node_modules/vuetify/lib/composables/stack.mjs:36)
at callWithErrorHandling (webpack-internal:///./node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js:286)
at callWithAsyncErrorHandling (webpack-internal:///./node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js:295)
at ReactiveEffect.getter [as fn] (webpack-internal:///./node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js:1858)
at ReactiveEffect.run (webpack-internal:///./node_modules/#vue/reactivity/dist/reactivity.esm-bundler.js:225)
at doWatch (webpack-internal:///./node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js:1973)
at watchEffect (webpack-internal:///./node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js:1778)
at useStack (webpack-internal:///./node_modules/vuetify/lib/composables/stack.mjs:34)
at Object.setup [as _setup] (webpack-internal:///./node_modules/vuetify/lib/components/VOverlay/VOverlay.mjs:151)
at setup (webpack-internal:///./node_modules/vuetify/lib/util/defineComponent.mjs:62)
My setup configuration is not that complex.
App.Vue
<template>
<v-app>
<v-dialog v-model="dialog">
<template v-slot:activator="{ props }">
<v-btn color="primary" v-bind="props"> Open Dialog </v-btn>
</template>
</v-dialog>
</v-app>
</template>
<script lang="ts">
export default {
name: "App",
data() {
return {
dialog: false,
};
},
};
</script>
main.ts
import { createApp } from "vue";
import store from "./store/planner";
import vuetify from "./plugins/vuetify";
import App from "./App.vue";
import router from "./router";
import i18n from "./i18n";
const app = createApp(App);
app.use(vuetify).use(router).use(store).use(i18n);
app.mount("#app");
This occurs on all the vuetify components involving v-overlay.
Related
I am developing an npm package. And I use third party library components inside my package. But I am having trouble importing components inside a package. For example with https://github.com/rlemaigre/Easy-DnD:
My CustomPackageComponent.vue:
<template>
<div>
<drop-list :items="[1, 2]">
<template v-slot:item="{item}">
<drag :key="item">
{{ item }}
</drag>
</template>
</drop-list>
</div>
</template>
<script>
import Vue from "vue";
import {DropList, Drag} from "vue-easy-dnd";
export default {
data() {
return {
someVar: 'foo'
}
},
components: {DropList, Drag}
}
</script>
And next in my index.js file:
import CustomPackageComponent from './components/CustomPackageComponent'
export {
CustomPackageComponent
}
Finally I use in my app. SomeAppComponent.vue:
<template>
<div>
<custom-package-component/>
</div>
</template>
<script>
import {CustomPackageComponent} from '#my-package-scope/some-name'
export default {
components: {CustomPackageComponent},
}
</script>
I have errors:
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'on')"
found in
---> <DropList>
...
TypeError: Cannot read properties of undefined (reading 'on')
at setCurrentInstance (app.js?id=be8d63a4f2dc42c0bbb5:70359:21)
at normalized (app.js?id=be8d63a4f2dc42c0bbb5:72030:9)
at Proxy.renderSlot (app.js?id=be8d63a4f2dc42c0bbb5:71709:13)
at app.js?id=be8d63a4f2dc42c0bbb5:69361:1276
at Proxy.renderList (app.js?id=be8d63a4f2dc42c0bbb5:71658:22)
at Proxy.__vue_render__$4 (app.js?id=be8d63a4f2dc42c0bbb5:69361:1229)
at VueComponent.Vue._render (app.js?id=be8d63a4f2dc42c0bbb5:72308:28)
at VueComponent.updateComponent (app.js?id=be8d63a4f2dc42c0bbb5:72748:27)
at Watcher.get (app.js?id=be8d63a4f2dc42c0bbb5:73932:33)
at new Watcher (app.js?id=be8d63a4f2dc42c0bbb5:73922:51)
[Vue warn]: Error in beforeMount hook: "TypeError: Cannot read properties of undefined (reading 'off')"
found in
---> <BVTransporter>
...
TypeError: Cannot read properties of undefined (reading 'off')
at setCurrentInstance (app.js?id=be8d63a4f2dc42c0bbb5:70357:51)
at VueComponent.Vue._render (app.js?id=be8d63a4f2dc42c0bbb5:72330:13)
at VueComponent.updateComponent (app.js?id=be8d63a4f2dc42c0bbb5:72748:27)
at Watcher.get (app.js?id=be8d63a4f2dc42c0bbb5:73932:33)
at new Watcher (app.js?id=be8d63a4f2dc42c0bbb5:73922:51)
at mountComponent (app.js?id=be8d63a4f2dc42c0bbb5:72765:5)
at VueComponent.Vue.$mount (app.js?id=be8d63a4f2dc42c0bbb5:79061:12)
at VueComponent.Vue.$mount (app.js?id=be8d63a4f2dc42c0bbb5:81625:18)
at init (app.js?id=be8d63a4f2dc42c0bbb5:136420:13)
at createComponent (app.js?id=be8d63a4f2dc42c0bbb5:139300:9)
[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading 'removeAttribute')"
TypeError: Cannot read properties of undefined (reading 'removeAttribute')
at Array.updateAttrs (app.js?id=be8d63a4f2dc42c0bbb5:140051:13)
at patchVnode (app.js?id=be8d63a4f2dc42c0bbb5:139636:62)
at updateChildren (app.js?id=be8d63a4f2dc42c0bbb5:139515:9)
at patchVnode (app.js?id=be8d63a4f2dc42c0bbb5:139641:29)
at VueComponent.patch [as __patch__] (app.js?id=be8d63a4f2dc42c0bbb5:139804:9)
[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading 'on')"
found in
---> <BVTransporter>
...
If I use this code without package everything is ok. I think, that is's something with vue lifecycle, but I don't have any idea how it fix.
Maybe I need to register my package by another way.
I use npm link for local development.
Also I try to import with Vue.Component(...) in CustomPackageComponent.vue:
<template>
<div>
<drop-list :items="[1, 2]">
<template v-slot:item="{item}">
<drag :key="item">
{{ item }}
</drag>
</template>
</drop-list>
</div>
</template>
<script>
import Vue from "vue";
import {DropList, Drag} from "vue-easy-dnd";
Vue.component('drop-list', DropList);
Vue.component('drag', Drag);
export default {
data() {
return {
someVar: 'foo'
}
},
}
</script>
But I have this error:
[Vue warn]: Unknown custom element: <drop-list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <CustomPackageComponent> at packages/packages/someScope/someName/src/components/CustomPackageComponent.vue
...
I installed a global component in #ionic-vue, but when using it in another component I get the following error:
[Vue warn]: Failed to resolve component: VuePhoneNumberInput at
<Registro ref=Ref< undefined > key="/registro" isInOutlet=true ... >
at at at
runtime-core.esm-bundler.js:38
[Vue warn]: Failed to resolve
component: VuePhoneNumberInput at <Registro ref=Ref< Proxy {
: {…}, : {…} }
key="/registro" isInOutlet=true ... > at at at
My global register:
import VuePhoneNumberInput from 'vue-phone-number-input';
import 'vue-phone-number-input/dist/vue-phone-number-input.css';
import './theme/variables.css';
const app = createApp(App)
.use(IonicVue)
.use(router);
app.component('vue-phone-number-input', VuePhoneNumberInput);
Other component:
<template>
<ion-page>
<Navigacion :titulo="titulo">
<template v-slot:default>
<div class="titulo-login">Ingresa a Jamuy con tu número de celular</div>
<VuePhoneNumberInput v-model="numero" #update="resultados = $event"></VuePhoneNumberInput>
</template>
</Navigacion>
</ion-page>
</template>
Main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
App.vue
template>
<v-app>
<Navbar/>
<div>
<v-content class="mx-4 mb-4">
<router-view></router-view>
</v-content>
</div>
</v-app>
</template>
<script>
import Navbar from '#/components/Navbar'
export default {
name: 'App',
components: {
Navbar
},
data: () => ({
//
}),
};
</script>
Navbar.vue (current)
<template>
<div>
<v-app-bar app flat color="">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>
<span>Sample App</span>
</v-toolbar-title>
</v-app-bar>
</div>
</template>
....
....
Navbar.vue (desired)
no template because I want to use render function
<script>
export default {
...
...
render(createElement){
const icon = createElement('v-app-bar-nav-icon')
return createElement('v-app-bar', [icon])
...
...
}
}
When I try this I get an errors:
vue.common.dev.js?4650:630 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Any suggestions?
For future reference:
You simply have to import the vuetify components manually into the vue component.
Navbar.vue
<script>
import { VAppBar, VAppBarNavIcon } from "vuetify/lib";
export default {
render(createElement) {
const icon = createElement(VAppBarNavIcon)
return createElement(VAppBar, {}, [icon]);
},
};
</script>
More info at this link.
I am having an issue while adding routes in Vue using Vue-router. I know it is a warning but still, I need to solve this issue, so your help will be appreciated. I am working with laravel vue and I am beginner.
I tried almost every StackOverflow link to remove this warning but failed. Below you can see my code.
app.js
window.Vue = require('vue');
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import moment from 'moment'
import $ from 'jquery'
import 'datatables.net'
import routes from './components/includes/routes'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.use(VueMaterial)
import App from './components/views/App'
Vue.filter('formatDate', function(value) {
if (value) {
return moment(String(value)).format('L (LT)')
}
});
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('app-component', require('./components/views/App.vue').default);
Vue.component('donations-component', require('./components/views/Donations.vue'));
Vue.component('needy-component', require('./components/views/Needy.vue'));
var router = new VueRouter({
routes: routes,
mode: 'history'
})
const app = new Vue({
el: '#app',
components: { App },
router,
});
routes.js
import Needy from '../views/Needy'
const routes = [
{
path: '/home',
name: 'donations',
component: Donations,
},
{
path: '/needy',
name: 'needy',
component: Needy,
},
];
export default routes
App.vue
<div class="page-container md-layout-column">
<md-toolbar class="md-primary">
<md-button class="md-icon-button" #click="showNavigation = true">
<md-icon>menu</md-icon>
</md-button>
<span class="md-title">My Title</span>
<div class="md-toolbar-section-end">
<md-button #click="showSidepanel = true">Favorites</md-button>
</div>
</md-toolbar>
<md-drawer :md-active.sync="showNavigation" md-swipeable>
<md-toolbar class="md-transparent" md-elevation="0">
<span class="md-title">My App name</span>
</md-toolbar>
<md-list>
<md-list-item>
<md-icon>move_to_inbox</md-icon>
<router-link :to="{ name: 'donations' }" class="md-list-item-text">Donations</router-link>
</md-list-item>
<md-list-item>
<md-icon>move_to_inbox</md-icon>
<router-link :to="{ name: 'needy' }" class="md-list-item-text">Needy</router-link>
</md-list-item>
</md-list>
</md-drawer>
<md-content>
<router-view></router-view>
</md-content>
</div>
</template>
<script>
export default {
data (){
return {
showNavigation: false,
showSidepanel: false
}
}
}
</script>
<style lang="scss" scoped>
</style>
Error in browser console
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the
parent component re-renders. Instead, use a data or computed property based on the prop's value.
Prop being mutated: "to"
found in
---> <RouterLink>
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdListItemContent> at src/components/MdList/MdListItem/MdListItemContent.vue
<MdListItemDefault> at src/components/MdList/MdListItem/MdListItemDefault.vue
<MdList> at src/components/MdList/MdList.vue
<MdDrawer> at src/components/MdDrawer/MdDrawer.vue
<AppComponent> at resources/js/components/views/App.vue
<Root> vue.js:597:15
[Vue warn]: $attrs is readonly.
found in
---> <RouterLink>
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdListItemContent> at src/components/MdList/MdListItem/MdListItemContent.vue
<MdListItemDefault> at src/components/MdList/MdListItem/MdListItemDefault.vue
<MdList> at src/components/MdList/MdList.vue
<MdDrawer> at src/components/MdDrawer/MdDrawer.vue
<AppComponent> at resources/js/components/views/App.vue
<Root> vue.js:597:15
[Vue warn]: $listeners is readonly.
found in
---> <RouterLink>
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdListItemContent> at src/components/MdList/MdListItem/MdListItemContent.vue
<MdListItemDefault> at src/components/MdList/MdListItem/MdListItemDefault.vue
<MdList> at src/components/MdList/MdList.vue
<MdDrawer> at src/components/MdDrawer/MdDrawer.vue
<AppComponent> at resources/js/components/views/App.vue
<Root>
I'm trying to create a custom component for some repetitive html. But the component won't show and I get this error:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <Child>
<VApp>
<App> at src/App.vue
<Root>
My main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
Vue.component('child', {
props: ['text'],
template: `<div>{{ text }}<div>`
});
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
My App.vue:
<template>
<v-app>
<child :text="message"></child>
<Navbar/>
<v-content>
<router-view></router-view>
</v-content>
<Footer/>
</v-app>
</template>
<script>
import styles from './app.css'
import Navbar from '#/components/Navbar'
import Footer from '#/components/Footer'
export default {
name: 'App',
components: { Navbar, Footer },
computed: {
theme(){
return (this.$vuetify.theme.dark) ? 'dark' : 'light'
},
},
data: () => ({
//
}),
};
</script>
What is going on? How to define a custom component?
My question "has mostly code"; so, my thoughts on vue.js: I notice that there are quite a few different ways or styles to build vue.js applications. I wish their examples would give more context on where to put the example code, I'm a seasoned developer, but new to web dev and js, and find that a lack of examples on the vue.js site really makes it hard to learn this framework.
Try this:
1- create a component in a separate .vue file
2- register it globally in main.js
3- then call it in any component directly.
1.
<template><div>{{ text }}<div></template>
<script>
export default{
props:['text']
},
</script>
2. in main.js
//...
Vue.component('child-component',require('./path/to/chaild/compoent').default);
//...
3 Now you can call it in any component because it is registered globally.
<template>
<div>
<child-component text='some text to pass as prop.'/>
//...
</div>
</template>
//...