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.

Log In

Your Teacher

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

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 }
  });
});

Want to stay up-to-date with Ruby on Rails?

Join 83,168+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.