vue-inbrowser-compiler

import { compile, addScopedStyle } from 'vue-inbrowser-compiler'; import { createApp } from 'vue'; // Assuming Vue 3 for a modern example const sfcCode = ` <template> <div class="hello" :style="{ color: dynamicColor }"> <h1>Compiled Vue Component</h1> <button @click="changeColor">{{ msg }}</button> </div> </template> <script> export default { data() { return { msg: 'Click Me!', dynamicColor: '#900' } }, methods: { changeColor() { this.dynamicColor = this.dynamicColor === '#900' ? '#009' : '#900'; } } } </script> <style scoped> .hello { text-align: center; font-family: sans-serif; } button { padding: 10px 20px; border: none; border-radius: 5px; background-color: #4CAF50; color: white; cursor: pointer; margin-top: 15px; } </style> `; function getRunnableComponent(code) { const compiled = compile(code, { target: { ie: 11 } // Buble configuration for transpilation }); // Add compiled styles to the document with a unique scope // The 'scoped' attribute in the SFC is handled by vue-inbrowser-compiler itself. // addScopedStyle is for when you manually scope or have global styles to add. // For SFCs, compiled.style already contains scoped styles. const styleTag = document.createElement('style'); styleTag.textContent = compiled.style; document.head.appendChild(styleTag); // Execute the script and return the component definition const func = new Function(compiled.script); return func(); } // Mount the compiled component const appDiv = document.createElement('div'); appDiv.id = 'app'; document.body.appendChild(appDiv); const componentDefinition = getRunnableComponent(sfcCode); const app = createApp(componentDefinition); app.mount('#app'); console.log('Vue component compiled and mounted to #app');