What happens?
Vuejs instead of treating v-on:click / #click as an event handler it treats it as if I was adding a element. And triggers the following error
vue.common.js:593 [Vue warn]: Unknown custom element: <click> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <OrderTable> at resources\assets\js\components\OrderTable\OrderTable.vue
<Page> at resources\assets\js\components\Pages\Page.vue
<Root>
warn # vue.common.js:593
createElm # vue.common.js:5570
addVnodes # vue.common.js:5737
updateChildren # vue.common.js:5864
patchVnode # vue.common.js:5938
updateChildren # vue.common.js:5824
patchVnode # vue.common.js:5938
updateChildren # vue.common.js:5824
patchVnode # vue.common.js:5938
patch # vue.common.js:6098
Vue._update # vue.common.js:2672
updateComponent # vue.common.js:2790
get # vue.common.js:3144
run # vue.common.js:3221
flushSchedulerQueue # vue.common.js:2983
(anonymous) # vue.common.js:1839
flushCallbacks # vue.common.js:1760
I have simplified the component the error is happening in. But there is nothing special about the span that is triggering the error. It's a child of the root div element. Also the addRow method is irrelevant as the error happens no matter which function you bind to the click event.
<template>
<div>
<span v-on:click="addRow">Add new row</span>
</div>
</template>
<script>
export default {
name: "OrderTable",
methods: {
newRow: function () {
console.log('Adding new row')
},
}
This is the extract from app.js regarding the element:
_c("span", { on: { click: _vm.newRow } }, [_vm._v("Add new row")])
Related
I want to render markdown in my component, which usually can be done with the marked library which can be installed like so:
yarn add marked
and used in a component like so:
<template>
<div id="article" class="article page">
<div v-html="test"></div>
</div>
</template>
<script setup>
import marked from "marked";
const test = marked('<p>hello</p>')
</script>
But for whatever reason it throws a bunch of errors:
[Vue warn]: Unhandled error during execution of setup function
at <Article onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <App>
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
at <Article onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <App>
[Vue Router warn]: uncaught error during route navigation:
TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_0__.default) is not a function
at setup (app.js:38984:66)
at callWithErrorHandling (app.js:25167:22)
at setupStatefulComponent (app.js:32032:29)
at setupComponent (app.js:31988:11)
at mountComponent (app.js:29911:13)
at processComponent (app.js:29886:17)
at patch (app.js:29487:21)
at ReactiveEffect.componentUpdateFn [as fn] (app.js:30096:17)
at ReactiveEffect.run (app.js:23830:29)
at callWithErrorHandling (app.js:25167:36)
Uncaught (in promise) TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_0__.default) is not a function
at setup (app.js:38984:66)
at callWithErrorHandling (app.js:25167:22)
at setupStatefulComponent (app.js:32032:29)
at setupComponent (app.js:31988:11)
at mountComponent (app.js:29911:13)
at processComponent (app.js:29886:17)
at patch (app.js:29487:21)
at ReactiveEffect.componentUpdateFn [as fn] (app.js:30096:17)
at ReactiveEffect.run (app.js:23830:29)
at callWithErrorHandling (app.js:25167:36)
Library versions used:
"vue": "^3.2.29"
"vue-loader": "^17.0.0"
"marked": "^4.0.12"
From this I figured that in verion 4 of marked instead of:
import marked from "marked";
you have to import it like so:
import { marked } from "marked";
since marked has been upgraded to version 4 upward, imported marked must be destructured
import marked from "marked"
it will solve the problem
Seems like i'm stuck with my problems with loading a external umd component in vue.
I try to do something similar as
Vue 3 external component/plugin loading in runtime
This works for me using vue2 and webpack
Now I'm using Vue3/Vite and also the same source as in the Question above.
But when resolving the external component promise i get the following error when :
vue.js:1184 [Vue warn]: Unhandled error during execution of async component loader
at <AsyncComponentWrapper>
at <DemoComponent>
at <HelloWorld msg="Hello Vue 3.0 + Vite" >
at <App>
warn # vue.js:1184
logError # vue.js:1357
handleError # vue.js:1349
onError # vue.js:4637
(anonymous) # vue.js:4677
Promise.catch (async)
setup # vue.js:4676
callWithErrorHandling # vue.js:1300
setupStatefulComponent # vue.js:7561
setupComponent # vue.js:7522
mountComponent # vue.js:5264
processComponent # vue.js:5240
patch # vue.js:4861
mountChildren # vue.js:5043
processFragment # vue.js:5203
patch # vue.js:4854
componentEffect # vue.js:5357
reactiveEffect # vue.js:339
effect # vue.js:314
setupRenderEffect # vue.js:5322
mountComponent # vue.js:5280
processComponent # vue.js:5240
patch # vue.js:4861
mountChildren # vue.js:5043
processFragment # vue.js:5203
patch # vue.js:4854
componentEffect # vue.js:5357
reactiveEffect # vue.js:339
effect # vue.js:314
setupRenderEffect # vue.js:5322
mountComponent # vue.js:5280
processComponent # vue.js:5240
patch # vue.js:4861
mountChildren # vue.js:5043
processFragment # vue.js:5203
patch # vue.js:4854
componentEffect # vue.js:5357
reactiveEffect # vue.js:339
effect # vue.js:314
setupRenderEffect # vue.js:5322
mountComponent # vue.js:5280
processComponent # vue.js:5240
patch # vue.js:4861
render # vue.js:5937
mount # vue.js:4168
app.mount # vue.js:9324
(anonymous) # main.js:7
Show 16 more frames
external-component.js:11 Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>
at <anonymous>
at HTMLScriptElement.<anonymous> (external-component.js:11)
this is the Code for the promise
export default async function externalComponent(url) {
const name = url.split(`/`).reverse()[0].match(/^(.*?)\.umd/)[1];
if (window[name]) return window[name];
console.log('run');
window[name] = new Promise((resolve, reject) => {
script.async = true;
script.addEventListener(`load`, () => {
resolve(window[name]);
});
script.addEventListener(`error`, () => {
reject(new Error(`Error loading ${url}`));
});
script.src = url;
document.head.appendChild(script);
});
return window[name];
}
and use this in my DemoComponent:
<script lang="ts">
import externalComponent from '../external-component';
import { defineAsyncComponent } from 'vue'
const asyncComponent = defineAsyncComponent(
() => externalComponent(`http://localhost:8200/MyComponent/MyComponent.umd.min.js`)
)
export default {
name: 'DemoComponent',
components: {
MyComponent:asyncComponent
},
....
Can somebody help me with this?
update:
If import vue from vue/dist/vue.esm-bundler and set to global, then no need to change Vite config, and no need to load vue from cdn.
import * as Vue from 'vue/dist/vue.esm-bundler';
window.Vue = Vue;
After trying the link above, I had gotten the vue warn invalid vnode type symbol(static) (symbol) error.
By adding the following config in Vite.config.js, it works for me.
// vite.config.js
import { viteExternalsPlugin } from 'vite-plugin-externals'
export default {
plugins: [
viteExternalsPlugin({
vue: 'Vue'
}),
]
}
https://github.com/crcong/vite-plugin-externals
I'm trying to use the Vuex store to hold the variable that will control whether or not the v-navigation-drawer component is open/visible. The reason is because I want to know if the nav-drawer is open from some other components and apply classes to some elements conditionally. Some code from my App.vue:
<v-navigation-drawer app v-model="this.$store.state.showNavDrawer" ...
...
<v-app-bar-nav-icon #click="toggleNavDrawer"></v-app-bar-nav-icon>
...
methods: {
toggleNavDrawer() {
this.$store.commit('toggleNavDrawer');
},
},
And in my main.js where my Vuex data is defined:
const store = new Vuex.Store({
state: {
showNavDrawer: null,
},
mutations: {
toggleNavDrawer(state) {
state.showNavDrawer = !state.showNavDrawer;
},
},
On initial page load, the screen size is respected and the nav-drawer shows/hides the way it should, but the following error shows up on the console:
[Vue warn]: Error in v-on handler: "TypeError: this is null"
found in
---> <VNavigationDrawer>
<VApp>
<App> at src/App.vue
<Root> vue.runtime.esm.js:619
TypeError: this is null
callback App.vue:17
VueJS 4
isActive VNavigationDrawer.ts:248
VueJS 7
confirmTransition vue-router.esm.js:2342
step vue-router.esm.js:1944
step vue-router.esm.js:1951
runQueue vue-router.esm.js:1955
confirmTransition vue-router.esm.js:2335
step vue-router.esm.js:1944
step vue-router.esm.js:1948
iterator vue-router.esm.js:2322
resolveAsyncComponents vue-router.esm.js:2105
iterator vue-router.esm.js:2300
step vue-router.esm.js:1947
step vue-router.esm.js:1951
runQueue vue-router.esm.js:1955
confirmTransition vue-router.esm.js:2330
transitionTo vue-router.esm.js:2203
init vue-router.esm.js:2923
beforeCreate vue-router.esm.js:1271
VueJS 4
<anonymous> main.js:42
js app.js:1113
__webpack_require__ app.js:849
fn app.js:151
1 app.js:1234
__webpack_require__ app.js:849
checkDeferredModules app.js:46
<anonymous> app.js:925
<anonymous> app.js:928
The first click of the nav-drawer control never does anything. There's no movement of the nav-drawer and there are no errors in the console. Every click after that works and shows/hides the drawer like it should, but there's an error in the console for every click:
[Vue warn]: Error in v-on handler: "TypeError: this is null"
found in
---> <VNavigationDrawer>
<VApp>
<App> at src/App.vue
<Root> vue.runtime.esm.js:619
TypeError: this is null
callback App.vue:17
VueJS 4
isActive VNavigationDrawer.ts:248
VueJS 10
toggleNavDrawer main.js:32
wrappedMutationHandler vuex.esm.js:844
commitIterator vuex.esm.js:466
commit vuex.esm.js:465
_withCommit vuex.esm.js:624
commit vuex.esm.js:464
boundCommit vuex.esm.js:409
toggleNavDrawer App.vue:157
VueJS 4
click VBtn.ts:158
VueJS 33
You cannot v-model to the vuex.
You need to use the :value="this.$store.state.showNavDrawer" prop instead. And then modify it with the #click event just the way you're doing it and you should be fine.
NB: If I were you I would give a boolean value straight away to your initial state, I don't see any point in making it null to start with.
Is there any tooltip tool that is integrated under NuxtJS? Currently I tried to use the v-tooltip but unfortunately I can't use it. Immediately it crashes.
I created the file in the plugins folder named tooltip.js and attached the following code there:
import Vue from 'vue'
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)
Then in nuxt.config.js in the plugins object I attached this file.
Error when used:
ERROR Failed to compile with 1 errors friendly-errors 11:04:04
ERROR in ./components/Dashboard/Navigation/index.vue?vue&type=template&id=a70e9826&
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): friendly-errors 11:04:04
(Emitted value instead of an instance of Error)
Errors compiling template:
tag <button> has no matching end tag.
13 | <div class="user-panel">
14 | <div class="notification">
15 | <button v-tooltip="'You have new messages.'">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
16 | <i class="fas fa-envelope">
17 | <div v-if="notification_active" class="notification-dot"></div>
friendly-errors 11:04:04
# ./components/Dashboard/Navigation/index.vue?vue&type=template&id=a70e9826& 1:0-209 1:0-209
# ./components/Dashboard/Navigation/index.vue
# ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/dashboard.vue?vue&type=script&lang=js&
# ./layouts/dashboard.vue?vue&type=script&lang=js&
# ./layouts/dashboard.vue
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
friendly-errors 11:04:04
ยป Updated components\Dashboard\Navigation\index.vue
For me is ok with create
plugins/tooltip.js
import Vue from "vue"
import { VTooltip, VPopover, VClosePopover } from "v-tooltip"
Vue.directive("tooltip", VTooltip);
Vue.directive("close-popover", VClosePopover)
Vue.component("v-popover", VPopover)
add css https://github.com/Akryum/v-tooltip#style-examples
And use
<input
type="text"
value=""
class="form-control"
v-tooltip="'Test tooltip'"
/>
you can use primevue with nuxt 3 and configure tooltip directive in primevue.js (starter : https://github.com/primefaces/primevue-quickstart-nuxt3/tree/main/plugins)
import Message from "primevue/message";
import Sidebar from "primevue/sidebar";
import BlockUI from "primevue/blockui";
import Tooltip from 'primevue/tooltip';
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(PrimeVue, { ripple: true })
nuxtApp.vueApp.use(ToastService)
nuxtApp.vueApp.component('Message', Message)
nuxtApp.vueApp.component('Button', Button)
nuxtApp.vueApp.component('InputText', InputText)
nuxtApp.vueApp.component('InputNumber', InputNumber)
nuxtApp.vueApp.component('Toast', Toast)
nuxtApp.vueApp.component('Dropdown', Dropdown)
nuxtApp.vueApp.component('Sidebar',Sidebar)
nuxtApp.vueApp.component('BlockUI',BlockUI)
// nuxtApp.vueApp.component('Tooltip', Tooltip)
nuxtApp.vueApp.directive('tooltip', Tooltip)
//other components that you need
})
With Nuxt3 you can use Floating Vue
yarn add floating-vue
Create file plugins/floating-vue.ts with below code
Enjoy nice tooltip as component or directive :)
plugins/floating-vue.ts
import FloatingVue from 'floating-vue'
import 'floating-vue/dist/style.css'
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(FloatingVue)
})
In a single file component in the project created by vue-cli, i want to import some components of vuestrap:
import Vue from 'vue'
import alert from 'vue-strap/src/alert'
import dropdown from 'vue-strap/src/Dropdown'
export default {
name: 'todo',
components: {
alert, dropdown
},
data() {
return {
msg: '...'
}
}
}
If I only import alert, it is working without any problem. However, if I import Input, Dropdown, i get errors inside the vue files of the vuestrap files itself:
ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-5f7de981!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-strap/src/Dropdown.vue
Vue template syntax error:
v-else used on element <ul> without corresponding v-if.
# ./~/vue-strap/src/Dropdown.vue 9:2-143
# ./~/babel-loader/lib!./src/components/todolist/todolist.js
# ./src/components/ToDo.vue
# ./src/router/index.js
# ./src/main.js
# multi ./build/dev-client ./src/main.js
ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-5f7de981!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-strap/src/Dropdown.vue
Vue template syntax error:
class="btn btn-{{type}} dropdown-toggle": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
# ./~/vue-strap/src/Dropdown.vue 9:2-143
# ./~/babel-loader/lib!./src/components/todolist/todolist.js
# ./src/components/ToDo.vue
# ./src/router/index.js
# ./src/main.js
# multi ./build/dev-client ./src/main.js
For some components the build is completely crashed (e.g. Datepicker).
My question is: is Vuestrap not compatible with Vue2 as they said in the documentation? Or am I missing something?