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>
Related
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.
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 have the follow structure:
- /src
- /views
- Login.vue
- Home.vue
- App.vue
App.vue
<template>
<Page>
...
<Button text="Login" #tap="onButtonTap" class="my-button" />
</Page>
</template>
<script>
...
methods: {
onButtonTap:function(){
this.$navigateTo(Home);
}
}
</scritp>
One of my modules is vue-router:
import Vue from 'nativescript-vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
mode: 'abstract',
// base: '/',
// saveScrollPosition: true,
// transitionOnLoad: true,
routes: [{
path: '/login',
component: () =>
import ('~/views/Login'),
},
{
path: '/home',
component: () =>
import ('~/views/Home'),
}
]
});
export default router;
Both using $navigateTo and $router I receive a error:
JS: [Vue warn]: Error in v-on handler: "ReferenceError: $router is not defined"
JS:
JS: found in
JS:
JS: ---> <App> at App.vue
JS: <Frame>
JS: <Root>
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onClick failed
System.err: ReferenceError: $router is not defined
System.err:
I'm trying to implement Google autocomplete using this link:
https://www.npmjs.com/package/vue-google-autocomplete
But I'm getting this error:
VM2823 app.js:62045 [Vue warn]: Error in mounted hook:
"ReferenceError: google is not defined"
found in
---> <VueGoogleAutocomplete> at node_modules/vue-google-autocomplete/src/VueGoogleAutocomplete.vue
<user> at resources/js/components/addUser.vue
<Root>
<template>
<div>
<h2>Your Address</h2>
<vue-google-autocomplete
ref="address"
id="map"
classname="form-control"
placeholder="Please type your address"
v-on:placechanged="getAddressData"
country="sg"
>
</vue-google-autocomplete>
</div>
</template>
<script>
import VueGoogleAutocomplete from 'vue-google-autocomplete'
export default {
components: { VueGoogleAutocomplete },
data: function () {
return {
address: ''
}
},
mounted() {
this.$refs.address.focus();
},
methods: {
getAddressData: function (addressData, placeResultData, id) {
this.address = addressData;
}
}
}
</script>
Please help to sort out my issue.
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>