Question: Simulate Pjax with VueJS 2.0


Simulate Pjax with VueJS 2.0

Answers 1
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)

Answers to

Simulate Pjax with VueJS 2.0

nr: #1 dodano: 2017-01-01 15:01

Yes, you can absolutely do that. You can structure your one page view with multiple components, and you can just reload the data of one component which will update only that component, or you can also have conditions with v-if, so that you can change which components will render dynamically.

Sample fiddle:

Sample fiddle simulating ajax with setTimeout:

You can use vuex to communication between multiple components, check one sample here.

Source Show
◀ Wstecz