JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<html>
<body>
  <script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>
  <script>

    const app = Vue.createApp({
        template: '<foo><bar>test</bar></foo> ',
        mounted: () => { console.log('main mounted'); } 
    })

    app.component("foo", Vue.defineAsyncComponent({
        loader: () => new Promise(
              (resolve) => {
                 setTimeout(()=>{
             		    resolve({
                      data(){
                        return {show:false}
                      },
            					template: 'foo (<slot v-if="show"></slot>)  <button @click="show=true">s</button> ',
            					mounted: () => console.log('foo mounted'),
              			} )
                 }, 4000)
              }        		
       			 
            )
        
    }));

    app.component("bar", Vue.defineAsyncComponent({
          loader: () => new Promise(
              (resolve) => {
                 setTimeout(()=>{
             		    resolve({
            					 template: 'bar (<slot></slot>)',
           				 mounted: () => {console.log('bar mounted');},
              			} )
                 }, 1000)
              }        		
       			 
            )
      /*   loader: () => Promise.resolve({
            template: 'bar (<slot></slot>)',
            mounted: () => {console.log('bar mounted'); debugger;},
        }) */
    }));

    app.mount(document.body);

  </script>
</body>
</html>