Adding vue 3 to existing web forms ASPX page

Question

In vue 2, in order to incorporate vue into an existing web forms ASPX page you just had to add the proper script tag. Something like this :

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Can you do this with Vue 3? I've been researching how to incorporate vue 3 into existing web forms application, like ASPX pages, and can't find anything on it. Can anyone show me how to incorporate vue 3 into an ASPX page?

Answer 1

use this

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>

or

<script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>

The Vue package makes multiple packages available:

• vue.cjs.js
• vue.cjs.prod.js
• vue.esm-browser.js
• vue.esm-browser.prod.js
• vue.esm-bundler.js
• vue.global.js
• vue.global.prod.js
• vue.runtime.esm-browser.js
• vue.runtime.esm-browser.prod.js
• vue.runtime.esm-bundler.js
• vue.runtime.global.js
• vue.runtime.global.prod.js

You'd pick whichever one work best, but the simplest way to go is to use the vue.global.js during development and vue.global.prod.js in prod

---

Example

const app = Vue.createApp({
  template: document.getElementById("appTemplate").innerHTML
})

app.component('my-component', {
  template: document.getElementById("componentTemplate").innerHTML,
  props:{name:{default: "‍♂️"}}
})

app.mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app"></div>

<template id="appTemplate">
  <h1>APP</h1>
  <my-component name="world"></my-component>
</template>

<template id="componentTemplate">
  Hello {{name}}
</template>

Answer 2

Based on official docs you could use CDN as follows :

 <script src="https://unpkg.com/vue@next"></script>