browser-runtime-vue

browser-runtime-vue

Vue 3 SFC compilation and rendering adapter for browser-module-runtime.

import {createRuntime} from 'browser-module-runtime';
import {vue} from 'browser-runtime-vue';

const runtime=createRuntime({plugins:[vue({version:'3.5.18'})]});
runtime.define('/Counter.vue',`<script setup>
import {ref} from 'vue';
const count=ref(0);
</script>
<template><button @click="count++">Count: {{count}}</button></template>
<style scoped>button { color: royalblue }</style>`,{type:'vue'});
const mount=await runtime.mount({module:'/Counter.vue',target:'#app'});
await mount.updateProps({initial:5});
await mount.dispose();

The adapter loads vue/compiler-sfc lazily through the owning runtime's package resolver. Both compiler and renderer follow the same version pin. It supports normal JS <script>, <script setup>, <template>, ordinary and scoped CSS, and native reactive updateProps(). Stylesheet assets use the generic runtime's reference-counted style manager.

Declarative HTML: <script type="vue" module="/Counter.vue"> accepts <$script setup> ... </$script> to avoid premature HTML parser termination; <runtime-render> and custom-element="my-counter" use the existing generic controller. External .vue and runtime.define() source use regular <script>.

Current limitations: TypeScript/preprocessor SFC blocks, CSS Modules, external src blocks, and Shadow DOM integration are not included in this first adapter. Vue CSS v-bind() and associated compiler options have not been browser-verified. CDN browser tests require network access and the package version to be published.