How this works

This small app demonstrates how to get Turbolinks to work with Vue.js. The random article picker above is built in Vue.js. Clicking on an article preview brings you to the full article, at another URL, and Turbolinks powers the quick transition to that page.

So far, so good. Normally, that would work fine without anything special. But upon clicking the Back button on that article to come back here, you'd normally get greeted with a random article picker that no longer works. This is because Turbolinks handles page changes by replacing the DOM of the body. Since Vue.js hooks up a bunch of listeners in the DOM, those all get wiped out on restores.

The fix: a Vue.js mixin saves the state of all of the components right before Turbolinks goes to the new page, and re-builds the components on return -- from scratch, and with the state of each component restored as it was.

To learn more about this trick, read the README for this demo on GitHub. For an intro of Turbolinks and Vue.js, and an intro on the trick, check out the presentation I gave at Ottawa Ruby on Sept 27, 2016.

Hope this helps,
Pascal Laliberté