To use this in a Rails project with webpacker support,
$ ./bin/yarn add vue-turbolinks
To use the mixin with the hello vue component created when you create a new
project with rails new myapp --webpack=vue
. In your component definition,
write:
import TurbolinksAdapter from 'vue-turbolinks';
document.addEventListener('turbolinks:load', () => {
var vueapp = new Vue({
el: "#hello",
template: '<App/>',
mixins: [TurbolinksAdapter],
components: { App }
});
});
If you want your Vue app to run only on certain pages, you can conditionally initialize the Vue app like so:
import TurbolinksAdapter from 'vue-turbolinks';
document.addEventListener('turbolinks:load', () => {
var element = document.getElementById("hello")
if (element != null) {
var vueapp = new Vue({
el: element,
template: '<App/>',
mixins: [TurbolinksAdapter],
components: { App }
});
}
});