I am wondering if it's possible to use Vue 3 in existinghtml pages. I have a huge project that was written in another framework and will be provided with empty html pages that have to be developed with vue. Is that possible somehow? I was thinking of using of cdn, but I heard it's bad for production.
1 Answers
Sure you can use Vue as a widget for existing HTML pages to fill them with content or make them more interactive.
You will need a dedicated HTML container element like <div id="app"> inside of <body> though, Vue can mount to.
HTML:
<div id="app">
<div class="test">({{ testMessage }})</div>
</div>
Load Vue via CDN to your page:
<script src="https://unpkg.com/vue@3.2.21/dist/"></script>
Custom JS to configure, create and mount the Vue instance to <div id="app">:
<script>
const app = {
data() {
return {
testMessage: 'World domination!';
}
}
}
Vue.createApp(app).mount('#app');
</script>
Related