How to use Vue.js and Turbolinks together Discussion

Hi! Maybe I do not understand correctly, but can I add SoundCloud with a turbolink and VUE? Work. How to do it?

Thank you, make an example if possible.

I feel like I must be missing something basic here Chris. How are you creating the "hello" element in the DOM? When I run the webpacker:install:vue it includes a createElement and then a mount for hello but I don't see that in your code. Thanks!

It still doesn't work in some cases. I did the same and tried to go 'home' and back and I caught errors like:

[Vue warn]: Error in destroyed hook: "NoModificationAllowedError: Failed to set the 'outerHTML' property on 'Element': This element has no parent node."

or

DOMException: Failed to set the 'outerHTML' property on 'Element': This element has no parent node.

Hi, what about if I'm using my files like :

poular_vue.js :

import Vue from 'vue'
import Popular from './popular.vue'

document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(document.createElement('popular'))
const popular = new Vue(Popular).$mount('popular')

})

popular.vue

<div v-for="nota in notas_p">
<div class="col-sm-3 post post-6">
<div class=" m0 inner">
<div class=" m0 featured_img">
<img v-bind:src="nota.image_url" alt="">
</div>
<div class=" m0 post_contents">
<div class="m0 category sports">
</div>
<h3 class="post_title">
{{nota.name}}
</h3>
<ul class="post_meta nav nav-pills">
<li></li>
</ul>
</div>
</div>
</div>
export default {
data: {
notas_p: []
},
mounted() {
axios.get("xxxxxxxxxxx")
.then(response => {
this.notas_p = response.data
})
},
}

(note: I am using Axios to get information from an Api)
and them I insert the vue component in the rails view like this :

<%= javascript_pack_tag 'popular_vue' %>

this how should I modified my code to move from one view to another taking the params like name and other information

Nice videos (including the nested form videos :).

What I'm wondering about: How is it possible that you specify a template in the Vue definition (since by default in a rails webpacker setup, the runtime only variant of vue is used, isn't it?). Is that because you import from 'vue/dist/vue.esm' instead of just 'vue'? Is that importing the full-blown variant including the template compiler? Because in my test with an import Vue from vue, I got the console warnings about template compiler not being available.

What I did instead: Omitting the el and template specification altogether and mount the Vue instance afterwards, like so:

var vueapp = new Vue(App)
vueapp.$mount(element)

Any caveats with that? Otherwise it seems like that would be a recommendable variant for the users of your Vue mixin, too, since the runtime variant is way smaller and recommended "to use whenever you can".

I'm running into an issue using Vue and Turbolinks where my page seems to load, but the Vue component doesn't fully render. My console log shows this error...

DOMException: Failed to set the 'outerHTML' property on 'Element': This element has no parent node.

This isn't on every page view, so it's difficult to debug. I noticed a comment earlier in the thread mentioning this error, but no other responses. Anyone come across this and have a solution or suggestion?

Thanks!