CODEWITHSUNDEEP
vue.jsvuejs3
Dave
Dave

Reputation: 2028

Vue components in existing html pages

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.

Upvotes: 2

Views: 3438

Answers (2)

Pavel Merta
Pavel Merta

Reputation: 119

If you want to use Vue in existing HTML page with npm installation and webpack you have to change the import in code.

Instead of

import { createApp } from 'vue';

use

import { createApp } from 'vue/dist/vue.esm-bundler.js';

Solution based on recommendation from Vue in console

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". 
  at <App>

There is also a note in Vue documentation here https://v3.ru.vuejs.org/guide/installation.html#with-a-bundler

Upvotes: 2

bitski
bitski

Reputation: 1258

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/[email protected]/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>

Upvotes: 2

Related Questions