Automatically evaluate your variables and inject JSON into the props.
You could also mount your components in random parts of your backend-generated page outside a Vue app:
Mounting components individually without a root like #app
import './assets/main.css';
import { createApp } from 'vue';
const app = createApp({});
const components = import.meta.glob('@/**/*.vue', { eager: true });
Object.values(components).forEach(({ default: component }) => app.component(component.__name, component));
const $app = document.querySelector('#app');
for (const path in components) {
const tag = path.match(/([^/]+).vue/)?.[1].split(/(?=[A-Z])/g).join('-');
for (const $elem of $app.querySelectorAll(tag)) {
for (const attr of $elem.attributes) {
if (!(attr.name[0] === ':' || attr.name === 'v-bind')) {
continue;
}
const fn = new Function('', `return JSON.stringify(${attr.value})`);
$elem.setAttribute(attr.name, fn());
}
}
}
app.mount('#app');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<script>
const message = 'Hello world!';
const subtitle = { content: 'And enjoy your sufferring!' }
</script>
<div id="app">
<hello-world :subtitle="subtitle" :msg="message"></hello-world>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
https://i.sstatic.net/bu2nh.png
The project's source code:
const src='UEsDBBQAAAAIAKZp11buhulvuAAAAC4BAAAKABwALmdpdGlnbm9yZVVUCQADR36VZA6ElWR1eAsAAQToAwAABOgDAABlTkGOwjAMvPsVQdwq0T6BC9y48QAUEm9JFezKTrvb3+N0hUBwmfGMbM9s3Yl7hVyhaY2Axvsu4nXqq2pg8UJfGkVY/vX4sZ9RyL8bQBzxcuc4ZVRoD+fLubAgxKRlhZ2qQOAZxfe4lgg+A3RhGQVVuzlFZO1ehgZBJL1xMRe27hiTfXQxCQYbEqrzFN1PWgNnDVaga2DzHPGv2Hli0nZQJmgtwFuwTmxIZdam8qCj8FD9TBV/9/AAUEsDBAoAAAAAAKZp11YAAAAAAAAAAAAAAAAIABwALnM...