title: How to hydrate Vue.js with server-side-rendered content from CMS?
body: <p>Let's say, this is the situation:</p>
  <ul>
  <li>content is managed through a &quot;classic&quot; CMS like WordPress or TYPO3</li>
  <li>content is delivered by the CMS as fully rendered HTML and CSS</li>
  </ul>
  <p>In the Frontend <strong>Vue.js</strong> should be used for all interactions with the UI.</p>
  <hr>
  <p>Even though I read most of vue's documentantion and also the page <a href="https://ssr.vuejs.org/en/" rel="nofollow noreferrer">Vue.js Server-Side Rendering Guide</a> as well as <a href="https://ssr.vuejs.org/en/non-node.html" rel="nofollow noreferrer">Usage in non-Node.js Environments</a>, I'm still not sure how to make this work.</p>
  <hr>
  <h3>An example<sup>*</sup></h3>
  <p>The page has a <em>component</em> which is basically a list of products. For eveybody with JavaScript this list gets a filter on top.</p>
  <p>Now, from the CMS I get the full rendered list, like:</p>
  <pre><code>&lt;div class=&quot;product-component&quot;&gt;
      &lt;ul class=&quot;products&quot;&gt;
          &lt;li data-id=&quot;1&quot;&gt;Product 1&lt;/li&gt;
          &lt;li data-id=&quot;2&quot;&gt;Product 2&lt;/li&gt;
          &lt;li data-id=&quot;3&quot;&gt;Product 3&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>After the JavaScript ran, it should look like this:</p>
  <pre><code>&lt;div id=&quot;product-component&quot;&gt;
      &lt;form&gt;
          &lt;select&gt;
              &lt;option value=&quot;1&quot;&gt;Show Product 1 only&lt;/option&gt;
          &lt;/select   
      &lt;/form&gt;
      
      &lt;ul class=&quot;products&quot;&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <hr>
  <p>The component in Vue.js could be something like this:</p>
  <pre><code>&lt;div id=&quot;product-component&quot;&gt;
      &lt;form&gt;
          &lt;!-- Vue.js logic for the filter --&gt;
      &lt;/form&gt;
  
      &lt;ul class=&quot;products&quot;&gt;
          &lt;li v-for=&quot;product in products&quot;&gt;
              {{ product.name }}
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  
  var vm = new Vue({
    el: '#product-component',
    data: {
      products: [
          {id: 1, name: 'Product 1'},
          {id: 2, name: 'Product 2'},
          {id: 3, name: 'Product 3'},
      ],
      filterCurrent: null,
    }
  });
  </code></pre>
  <hr>
  <p>Now my questions are:</p>
  <ul>
  <li>How to hook Vue.js into a prerendered Template?</li>
  <li>How to update/inject Vue.js variables (especially <code>data</code>) on runtime?
  <ul>
  <li>Which means: How can I get the list of products from the CMS into the component?</li>
  </ul>
  </li>
  <li>As the list and by that parts of the template are rendered already, must Vue.js re-render it, after its initialisation?</li>
  <li>How is this represented in <a href="https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram" rel="nofollow noreferrer">Vue.js' Lifecycle</a>?</li>
  </ul>
  <p>Last but not least: <em>Is setup this even possible?</em></p>
  <hr>
  <p><sub><sup>*</sup> The code is just pseudocode to illustrate the problem.</sub></p>