vue-replace-static

index.html

<div id="rootDiv">
  <div v-if="!loaded">Content from Server</div>
  <test-comp v-if="loaded"></test-comp><!-- do NOT shorthand, vue does swallow the rest of rootDiv then -->
  <test-bt><button>from Server</button></test-bt>
  <div v-text="vueText">Text from Server</div>
</div>
<br /><br />
<button onclick="igniteVue()">Go, vue!</button> (normally on load)

script.js

Vue.component('TestComp', {
  template: '<div style="font-weight: bold; ">Content from Vue</div>',
});
Vue.component('TestBt', {
  template: '<button>from Vue</button>',
});

function igniteVue() {
  new Vue({
    el: '#rootDiv',
    data: {
      loaded: true,
      vueText: 'Text vom Vue',
    },
  });
  Vue.$forceUpdate();
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

vue-replace-static.markdown

vue-replace-static

A Pen by Sebastian Rothbucher on CodePen.

License.