So today it's Friday afternoon, and I've returned to my desire to get Vue to work seamlessly with Turbolinks. This is something I reviewed quite a bit, maybe a year ago, and it turns out when you use Vue with Turbolinks it can get a little tricky and you lose reactivity, and I ended up not using Turbolinks for that reason. But it seems like it might have been solved since then. So what I'm going to do is switch over to the little forum series that I have at LaraCast, and we're going to see if we can get Turbolinks working with this as a demonstration. Okay, so I'm going to go to resources/app.js, and this is kind of a standard setup here. We register some components. You don't really need to worry about any of this. But what I do want to do is pull in Turbolinks. So yarn add Turbolinks, and what I'm going to do is show you where the problem was that caused me so much confusion, and then hopefully we can fix it together using that new package I found. Okay, so now

actually start working out of the box. So if I click on it, yeah, it does seem to be working. So you'll notice if you look right up here, without Turbolinks, you'd of course get that little spinner that would indicate that we were doing a full postback. But now, if I click on a link, you're not going to see it at all up there. And that's because the way Turbolinks works is when you click on any link, a site-specific link, it's going to perform an AJAX request to the server, get the response, strip out the body, and then insert it into the page, all without doing a full postback. So the benefit to this is all of your assets, like your JavaScript and your style sheets, the big things really, you don't have to re-download those every single time. So that's what makes the process of going from one page to another so very fast. And in fact, if we open up the Network tab, and we click on one of these, sure enough, you can see that we did make an XHR

But then let's go to a new thread. All of this is being done without a postback. But then if I click the Back button, this is where things get tricky. Because now I click on Edit, and no, we've lost reactivity. And this was the very thing that stumped me for a long time, is how to get Vue to play nicely with Turbolinks. So it looks like this has now been solved. So there's a package called vue-turbolinks. And if we take a look at it, it's a mixin that you add to your Vue instance. And we can see that it basically listens for right before Turbolinks is about to cache the current page, and it destroys your Vue instance data. And then once Vue is destroyed, it's basically going to reassign the outer HTML equal to this temporary variable that was saved right before Vue was mounted. So neither of us even really needs to know much about that. We just need to know how to pull it in. So I'm going to add it right here. And while that's doing

right before Vue was mounted. So neither of us even really needs to know much about that. We just need to know how to pull it in. So I'm going to add it right here. And while that's doing its thing, let's come back. And we can see that we import the adapter, and then we include it as a mixin. And then we also wrap the whole thing within Turbolinks.load. So this event will be fired automatically by Turbolinks right when the page loads, and then every time you visit a new link. So let's give this a shot. We're going to go back to Sublime here, and back to app.js. Let's just do this at the top. And then if we scroll down, we're going to register a mixin here. Finally, as we saw, the only remaining step is to wrap this whole app instance within a event listener. So let's just grab all of that. Let's get rid of this. And then constant wouldn't be appropriate, and I don't think it's ever appropriate. I hate constant. So I kind of default to let,

and it's not remembering that. Let's see if we need to change anything from the project. So I'm going to go into our master page. Oh, you know what I bet it is? So yeah, here's what I think it is. We're loading our script within the bottom of the body tag, which is just a general good practice. However, if we're using Turbolinks, that's going to get, I think, reinserted every single time. So I think this should go within the head tag here. Because remember, with Turbolinks, it's only going to get loaded once, and then for every new page, it will strip out the head tag of the new page. It's going to merge in anything different that doesn't exist already, but it's not going to refetch any of these. So I think that might do the trick. Let's give that a shot. Refresh. I'm going to go to new thread, and then I will come back. Yeah, now that's what we want. So hopefully, edit this again now. Update. new thread. Back. And if we have reactivity, we do.