4

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 :)

EDIT

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)

César Dueñas
  • 331
  • 4
  • 18
Ziga Petek
  • 3,953
  • 5
  • 33
  • 43
  • Really interested in your findings, as I'm actually thinking of the same structure. Did you get anything working that you could share? How would you manage URLs for example (vue-router)? Can you manage transitions when loading new content? Thanks. – Nico Prat Feb 07 '17 at 21:08

1 Answers1

3

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: http://jsfiddle.net/mimani/6dgbg2dL/

Sample fiddle simulating ajax with setTimeout: http://jsfiddle.net/6dgbg2dL/1/

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

tony19
  • 125,647
  • 18
  • 229
  • 307
Saurabh
  • 71,488
  • 40
  • 181
  • 244
  • Thanks for your answer. I was actually searching something along the way of dynamic template replacing. For example, with jquery I'd load the page I wanted with ajax and then just replace the content I need (kind of like pjax). With Angular 1.0 I'd use a low level function to compile the content first. I suspect something similar exists in VueJS, but I haven't found it yet. Maybe it's better this way, it could leave the system open for all sorts of vulnerabilities. Reloading the data would assume for the backend to be constructed like an api, which it currently isn't :( – Ziga Petek Jan 01 '17 at 16:59
  • @itd Yes, with the two way binding of vueJs, if you change the data, it will just replace the content and will not rerender the page, this is what you are asking, right? – Saurabh Jan 01 '17 at 17:12
  • While every other use case is met by Vuejs, I don't think my specific use case is ( it is kind of hackerish :P). In some of my past projects, I always had an element, that was holding the content (for example a div with id #content"). When the user clicked on a link, I loaded the whole page with ajax and only replaced the main content, leaving the header,footer alone. Think of it like "v-html" only that the components inside the html get compiled. Since the owner of the page can create custom pages, there is no way to predict the content. Maybe I just took the wrong approach – Ziga Petek Jan 01 '17 at 17:32
  • @itd Pardon my not understanding, isn't that what I am doing here, when I am just changing the `title`: a div with title, and when title is changing only that component changes and rest of the page, like button in my fiddle stays as it is, see [updated fiddle](http://jsfiddle.net/6dgbg2dL/1/), where I am simulating `ajax` with `setTimeout`. – Saurabh Jan 02 '17 at 04:45