Skip to main content

How to use Vue.js and Turbolinks together Discussion

General • Asked by Chris Oliver

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


Patrick Schönfeld

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".


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 22,346+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.