Vue3 - html in html

by Eugene Manager

HTML

<head>
  <script src="https://unpkg.com/vue@latest"></script>
</head>

<body>
  <div id="app"></div>
  
  <div id="components" style="display:none">
    
    <div id="my-template">
      <h1>{{ message }}</h1>
      <my-component></my-component>
    </div>
    
    <div id="my-component-template">
      <div>A component</div>
    </div>
  </div>

</body>

JavaScript

const app = Vue.createApp({
	data() {
    return {
      message: 'Hello Vue!'
    };
  },
  template: document.querySelector('#components #my-template').innerHTML
});

app.component('my-component', {
  template: document.querySelector('#components #my-component-template').innerHTML
});

app.mount('#app');