How to use Vue.js and Turbolinks together

April 17, 2017

Track your progress

Sign in to track your progress and access subscription-only lessons.

Your Teacher

Chris Oliver

Hi, I'm Chris. I'm the creator of GoRails, Hatchbox.io and Jumpstart. I spend my time creating tutorials and tools to help Ruby on Rails developers build apps better and faster.

About This Episode

Using Vue.js and Turbolinks together can be a little complex to wrap your head around at first. We not only dive into how this works but we take a look at the vue-turbolinks node module I made so that you can easily use the two together.

Notes

Resources

Vue-Turbolinks node module

To add Vue-Turbolinks into your Rails Webpacker installation, you can do the following:

yarn add vue-turbolinks

import TurbolinksAdapter from 'vue-turbolinks';

document.addEventListener('turbolinks:load', () => {
  var vueapp = new Vue({
    el: "#app",
    template: '<App/>',
    mixins: [TurbolinksAdapter],
    components: { App }
  });
});