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.
Related
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 having a blocker right now with regards to using blade #can directives inside a vuejs component.
#can('view user', $lead)
<button>view</button>
#endcan
Vue displays this as a text instead of using laravel's gate
I know it's a boomer, but you could try adding the v-cloak property to your <button> tag, and changing the native #can directive to an #if (auth()->user()->can('view_user', $lead))
This workaround should do the job.
I wonder how can I achieve a simple tooltip component in Vue?
What I try to do is: Hover on element, a component tag will be appended.
I do not know how to compile/render that component into DOM after I append it using jquery. In Angular, this can be achieved by using $compile
This way to implement tooltip may not be a good practice, but I just wonder how to achieve.
Thanks,
I inject raw html into my page. I would like to extract all the <a> elements in this and replace them with my <custom-link-component>. Is there a way of doing this with Vue?
I get raw html from the data service and inject it into a vue component using v-html.
So far I have a mixin that finds all <a> elements but can't work out how to replace them:
const links = document.querySelectorAll('a');
Many thanks.
I think it's not possible to achieve what you want in this way. If you want to use vue component instead of links, you have to place them in your markup as components like vue router-link as an example:
<!-- literal string -->
<router-link to="home">Home</router-link>
<!-- renders to -->
Home
It was discussed here, look like same question.
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!