Simulate Pjax with VueJS 2.0
|Added at||2017-01-01 13:01|
Recently I decided to check out VueJS 2.0. Since I still mostly work with various CMS systems (Wordpress, Typo3, OctoberCMS, that kind of stuff) I wanted to try and implement a pjax like page loading. To my suprise, it is not as simple as I thought.
Is there a way to replace parts of the page and reinitialize the components in VueJS?
I should probably explain why I want to implement such a feature. In the last years I found that it is much easier and quicker to develop feature rich websites using a frontend framework. However, since most customers need a backend to manage their websites, using an already existing CMS is a no brainer. In the past I used Angular to build the frontend. It worked suprisingly well, even with pjax, since it is possible to reinitialize parts of the page in Angular 1.0.
Angular 2.0 took a different approach and while I absolutely love what they have done with it, I do not think it is suitable for use in an enviroment, where most of the frontend is being rendered by the server. That's why I decided to check out VueJS.
I want to implement a pjax-like feature, because the HTML already gets rendered on the serverside and dynamically replacing parts of the page just looks cool :)
Just to be clear, I am not talking about the jQuery pjax plugin, just about dynamically replacing parts of the page (which in the company I worked for before was simply referred to as "pjax" :P)