I'm using the vue-js-toggle-button plugin available at https://www.npmjs.com/package/vue-js-toggle-button.
I've installed the plugin in my main.js file like so:
import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)
The plugin works fine when I use it in one of my main components, but when I use it in a child component I receive a warning:
[Vue warn]: Unknown custom element: <toggle-button> - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
I only receive this error when trying to use the plugin from a child component.
So for example, in my Child.vue file I might have this:
<toggle-button />
My Parent.vue file includes the child
<child/>
Anyone have an idea what's going on here?
I also want to point out that the plugin still works in the child component, but this warning is showing up in the console. I just want to get rid of the warning.
The child file basically looks like this:
<template lang="html"><div>
<toggle-button id="control-toggle-pg"
:labels="{checked: 'PG', unchecked: 'VG'}"
:color="{checked: '#333', unchecked: '#999'}"
:value="isPG" :sync="true"></toggle-button>
</div></template>
Related
Im facing a problem for my VUE app, Im using the vue Router to navigate to my component
In my Header component I use router-link to navigate to a Home component
The problem is :
In my Header component I would like a checkBox (a boolean variable) that change the content of my Home component (rendered in the router-view) like a v-if that would check the boolean variable in the Header
Here is my App.vue template I was trying to solve the problem through emits but Im Kinda stuck for passing data inside a component (inside the router-view)
<template>
<div class="content">
<HeaderComponent #eventCheckBox="handleCheckBox" />
<router-view />
<FooterComponent />
</div>
Do you guys have already faced this issue, is there a way to do it the classic way or should I try plugins like Portal or Teleport ?
Portal and Teleport are the same, just a different name (teleport in Vue3, being the official name).
As of the rest of the question, this explains it very well: https://stackoverflow.com/a/49702934/8816585
Mainly, you need to see if you need to use a store like Pinia (recommended one) and Vuex. Most of the time, you could use a parent/child relationship. Here is another article explaining when you would need something like that: https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/#alternatives-to-storing-data-in-vuex
In Vue3, you could even not use a store and rely solely on the singleton pattern + composables (again, a lot of articles are available for that one).
TLDR: use your Vue devtools and inspect the state flowing.
If you need more, reach for more powerful tools.
I have written a very simple, learning "hello world" type component, in the vue 2/typescript 4 project at:
https://github.com/sldev2/vr-vtsv-timeline
This project was made with vue ui. I've added #vue/composition-api 1.0.3 and vuetify 2.4.0
The component is called CompositionApiEg.vue. It doesn't use any explicit vuetify styles. When you browse to http://localhost:8080/, It displays 3 names, and allows you to increase "capacity" by clicking the button with text "Increase Capacity". (The button border does not show. I know not why; I assume I need a vuetify button style) There are no runtime errors in the browser.
The CompositionApiEg.vue file is here.
I've tried transplanting this component into another vue2/typescript 4 project also made with vue ui, with the composition-api added, but that has tailwind instead of vuetify. The component was not modified in any way. In particular, no tailwind styles were added.
This project is at: https://github.com/sldev2/v23tstw
Now, however, this component is throwing a bunch of runtime errors, such as:
warning eg:
vue.runtime.esm.js?d04a:619 [Vue warn]: Property or method "spacesLeft" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
error eg:
vue.runtime.esm.js?d04a:1897 TypeError: _vm.increaseCapacity is not a function
at click (CompositionApiEg.vue?c6d9:27)
at invokeWithErrorHandling (vue.runtime.esm.js?d04a:1863)
at HTMLButtonElement.invoker (vue.runtime.esm.js?d04a:2188)
at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?d04a:6961)
Why does the exact same, very simple component succeed in one vue2 project, but not in another?
I am using livewire in a Laravel 7 and laravel-ui project.
I created a component with livewire like this:
<livewire:task-steps :steps="$taskCategory->steps" />
This is the only component on the page and I am getting this error from vue:
I don't know why vue is validating that component's property. I tried to install livewire/vue but nothing works.
This is my app.js https://gist.github.com/LTroya/710bfbd95988003b441d533ccbe6106d
I don't know what else to do. I will appreciate any hint
Vue and livewire are competing over who owns the html.
You can tell vue to ignore a block with v-pre: https://v3.vuejs.org/api/directives.html#v-pre
Or you can tell livewire to ignore a block with wire:ignore, the following page will show examples of using it: https://laravel-livewire.com/docs/2.x/alpine-js#creating-a-datepicker
In your case, wrap the code in a div and use v-pre on it.
<div v-pre>
...
</div>
I am able to add component from array variables to main component using following way:
<component :is="currentTabComponent"></component>
Now I want to add another dynamic component inside rendered component.
If u say using slot then how can i access specific component's slot and push my variable component to that slot.
https://jsfiddle.net/capt8ndq/42/
I have created example fiddle have mainContainer->slider->sliderContent(this may have further nesting) structure.
I am getting following error after some progress
Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
Thanks for the help!
Instead of using slot, make use of props by passing props down to that rendered component and also modify that rendered component to also has <component :is="componentFromProps"></component>.
I struggle to understand the component and template system in VueJS. I downloaded the VuetifyJS PWA example template and tried to replace the complete content of Hello.vue with the content of the VuetifyJS google-contacts.vue example template.
I got this error message after npm run dev on localhost:8080:
> vue.esm.js?65d7:578 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Hello> at /home/a/my-project/src/components/Hello.vue
<App> at /home/a/my-project/src/App.vue
<Root>
Why is it not possible to just replace the <template></template> content and what do I need to change to use the google-contacts.vue template content instead of the Hello.vue content?
I just followed the process and it works ok for me, so I'm guessing it's most likely a miss-step in your build, but so far can't reproduce it.
Note, it looks like docs/examples/layouts/google-contacts.vue is a replacement for the overall page layout rather than an individual component (thinking along the lines #B.Fleming mentions in comments), so it's more appropriate to replace App.vue than Hello.vue.
This is what I originally did (not reading your post thoroughly). But subsequently replacing Hello.vue gives me the same working Google Contacts page.