<html>
<header>
  <!-- <link href="styles/general.css" rel="stylesheet" type="text/css" /> -->
  <link href="styles/main.css?v=1" rel="stylesheet" type="text/css" />  
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <link rel="stylesheet" href="dist/css/adminlte.min.css">  
  <link href="https://dev.iconly.io/public/x2OLQFwf8Nev/iconly.css" rel="stylesheet"/>  
</header>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
  <script src="//unpkg.com/element-plus"></script>
  <script>
    const options = {
      moduleCache: {
        vue: Vue,
        ElementPlus,
        axios
      },
      async getFile(url) {
        
        const res = await fetch(url);
        if ( !res.ok )
          throw Object.assign(new Error(res.statusText + ' ' + url), { res });
        return {
          getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(),
        }
      },
      addStyle(textContent) {

        const style = Object.assign(document.createElement('style'), { textContent });
        const ref = document.head.getElementsByTagName('style')[0] || null;
        document.head.insertBefore(style, ref);
      },
    }

    const { loadModule } = window['vue3-sfc-loader'];

    const app = Vue.createApp({
      components: {
        'my-component': Vue.defineAsyncComponent( () => loadModule('./templates/components/affiliate.vue', options) )
      },
      template: '<my-component></my-component>'
    });

    app.use(ElementPlus)
    app.mount('#app');
  </script>
</body>
</html>