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>
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 want to create a nuxt-link from js and put it in a div
I am not able to add nuxt-link from js. Can someone help me on this.
mounted() {
$(".creator-content .row").append(`
<nuxt-link to="/">GG</nuxt-link>
`)
}
You cannot add references to Vue components by using "vanilla JavaScript" or JQuery operations (unless you use Vue via tag, which isn't possible via Nuxt).
Instead, this should be part of you Vue component's template. You can then load the component conditionally via directives as #kissu described in his comment.
Im trying to upgrade a project from Vue 2 to Vue 3 and there is a component in there with collections of different Vue components.
The way it worked in Vue 2 is by calling a Twig template (for example: field.twig) in Twig and sending that to Vue to compile using the :is attribute and Vue.compile method (<div :is"compile(element.content) ...").
This is what the Twig templates sends to Vue:
However in Vue 3 this doesnt seem to work anymore. There is nothing getting rendered and if I just use {{ element.content }} in the template it returns the raw code.
I have tried multiple things to get the html mixed with Vue to render (v-html, v-runtime-template) but none of these seemed to fix the issue.
Vue Component: Collections Component
Twig Template: Collections Template
You can try https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/ or https://www.npmjs.com/package/vue-runtime-template-compiler but I am not sure if these work in Vue 3 ...
I am trying to use a web component which extends an existing element using the "is" attribute tag, but vue takes that attribute and converts it into a custom element.
I need vue to still recognize the v-model and business logic, but I also need vue to not change it to a custom component.
Vue turns this:
<textarea v-model="text" is="my-component"></textarea>
into:
<my-component></my-component>
I have tried setting "v-pre" but that keeps vue from tracking the v-model. I have also tried to set ignoredElements, but vue still convert to a custom element. I looked https://github.com/vuejs/vue/issues/2642 and it seems like this is supposed to be a fixed issue, but maybe I am missing something.
Here is a minimal example of what is happening: https://jsfiddle.net/ntkg1xeq/1/
Notice that the textarea turns into real-set in this example.
I would expect vue to disregard the "is" attribute if it does not match any registered components, and to not rewrite the element thus preventing the web component from working.
Is there any way to use vue and web components like this together?
According to the last comment of Web component with "is" attribute not rendered in the view., <textarea v-pre v-model="text" is="my-component"></textarea> would be
render to <textarea is="my-component"> just as your expectation. However, it seems the issue just fixed Vue 1.x ( Vue 1.0.12 example code ), not Vue 2.x ( your example code ).
So. if you want to set is attribute in textarea and make v-model works in Vue 2.x, I thought $refs is another solution ( Vue 2.x example code by using $refs ).
So basically, when using components - the app root passed to the Vue instance gets replaced by whatever HTML is in the component. Is there a way to disable this and just nest the stuff Vue renders inside the app root instead?
for example - if index.html has a wrapper of
<div id="myVueApp"></div>
and I set el: "#myVueApp" on the Vue instance, the whole node will get removed and replaced by whatever I have in my template resulting in
<div id="myComponent">...</div>
Is there a way to make it into
<div id="myVueApp">
<div id="myComponent">...</div>
</div>
Should work. From what I understand, you want to have multiple parts of your Vue app to be splitted up in the rendered HTML output as well, more specifically into multiple divs.
I think this should work if you use multiple Vue instances.
Set up a structure in your HTML file and give them appropriate id's.
Then, create the Vue instances you want and assign each of them to their specific div using el.
However, I can't tell you if this is a good idea and follows the best practice..
Hope this helps!