NoScript SFC

Load vue3 SFC component with inline <noscript> or <template> tag. Funny :-) :Yeah:

<!DOCTYPE html>
<script defer src="https://unpkg.com/vue-sfc-in-html"></script>
<noscript vue name="MyComponent" mount="#app">
  <script setup>
    import { ref } from "vue";
    const count = ref(0);
  </script>

  <template>
    <button @click="count++">Count is: {{ count }}</button>
  </template>

  <style scoped>
    button {
      font-weight: bold;
      color: red;
    }
  </style>
</noscript>
<body>
  <div id="app"></div>
</body>

You can also use template tag instead of noscript.

<!DOCTYPE html>
<script defer src="https://unpkg.com/vue-sfc-in-html"></script>
<template vue name="MyComponent" mount="#app">
  <script setup>
    import { ref } from "vue";
    const count = ref(0);
  </script>

  <template>
    <button @click="count++">Count is: {{ count }}</button>
  </template>

  <style scoped>
    button {
      font-weight: bold;
      color: red;
    }
  </style>
</template>
<body>
  <div id="app"></div>
</body>

src is also supported.

<!DOCTYPE html>
<script defer src="https://unpkg.com/vue-sfc-in-html"></script>
<body>
  <script type="sfc-importmap">
    {
      "imports": {
        "@tanstack/vue-virtual": "https://esm.sh/@tanstack/vue-virtual"
      }
    }
  </script>

  <template
    vue
    name="MyComponent"
    src="https://raw.githubusercontent.com/AngusFu/vue-sfc-in-html/fork-main/example/vue/test.vue"
    mount="#app"
  ></template>
  <div id="app"></div>
</body>