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 ...
Related
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.
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 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 ).
I would like to know how I can add an old Three Js code to a page component in Vue Js, like just plain javascript grabed on html script tag, without using methods or computed objects from Vue
I'm using node 10.14, Vue-cli 3 and Vue scaffold
If I understand your question correctly, one way you could probably do this is to have the JavaScript extracted out into a helper file like /lib/3JS.js and then make sure to export it.
Then you could import it into your Vue file and use it there.
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!