Vue 2.0 server-side-render with template inside #app container

Question

Server side rendering page for reference: ssr.html

Now the problem, what if we want to define template inside the <div id="app"></div> in html file itself, not in Vue instance template property? Like this:

<div id="app">You have been here for {{ counter }} seconds.</div>

In this case if we want to pre-render it, we will get next pre-rendered html:

<div id="app" server-rendered="true">You have been here for 0 seconds&period;</div>

And here is the conflict problem. If we will output pre-rendered html, we lose our template and Vue doesn't know where to output counter inside our <div id="app">.

Is it possible somehow to provide template inside <div id="app"></div> container and in the same time pre-render it? Or provide template near the pre-rendered in html(so Vue will know that here is pre-rendered and here is template and i will use it if any changes happens in the model)?

Answer 1

Is it possible somehow to provide template inside container and in the same time pre-render it? Or

Short but complete answer: No. For Vue SSR, you cannot use in-DOM templates. You have to use string-based templates (including Single File Components).