search

vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.73k stars 33.68k forks source link

Using existing rendered template #7345

Closed sagarkbhatt closed 6 years ago

sagarkbhatt commented 6 years ago

What problem does this feature solve?

Can I mount vue on existing php rendered markup so vue can directly hook on it. example : If direct request then server render the markup ( without using v8 ) and vue will take over once document loaded at client side and if vue router request then js will render the markup. I can also try that both php and js will render same markup ?

What does the proposed API look like?

If php rendered markup with data-rendered attribute is detected then vue will hook on it directly.

yyx990803 commented 6 years ago

Vue server side rendering requires v8, but you can call v8 from php via v8js: https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#environment-agnostic-ssr

sagarkbhatt commented 6 years ago

@yyx990803 I tried calling v8 from PHP. But I am talking about the existing template. Projects that are already doing well with PHP. They are already server rendered, In such case can I hook Vue component directly on it? I can sync markup in js ( Vue component ) so it can work well with Vue router. In short server-side rendering without v8 dependency. Consider this scenario where a project is going to distribute among several clients and we can't force everyone to install PHP v8 js extension.

yyx990803 commented 6 years ago

I'm not sure if I understand what you mean. You obviously can mount Vue components to existing markup, it simply replaces whatever is previously there.

sagarkbhatt commented 6 years ago

@yyx990803 Yes mount to existing markup and instead of replace can we do sync ? Like markup + state to sync with vue component.

yamsellem commented 5 years ago

@yyx990803 vue-server-renderer allows the generation, server side, of an HTML template that will later be used by the client side code (so it can properly hydrate).

It does so by the addition of data-server-rendered="true" in the main div.

Is there a documentation which explains how vue-server-renderer renderToString works? Which kind of markup it creates?

With this, maybe it should be possible to generate manually the same markup in non-nodejs env, without the use of v8js (or something else), just with a basic template language.

This may seems odd, but some code may want to use ssr without node and without any tools – just with plain old markup.

If it's not too complicated.

(I may understand it will depends on vuejs version, but still).

Thanks a lot.