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?

could you show how you used to do that with vue 2?

Boussadjra Brahim
– Boussadjra Brahim

2020-09-25 17:42:23 +00:00
Commented Sep 25, 2020 at 17:42 — Boussadjra Brahim
– Boussadjra Brahim, Commented Sep 25, 2020 at 17:42
see OP @BoussadjraBrahim

WebDevGuy2
– WebDevGuy2

2020-09-25 17:57:46 +00:00
Commented Sep 25, 2020 at 17:57 — WebDevGuy2
– WebDevGuy2, Commented Sep 25, 2020 at 17:57

Daniel · Accepted Answer · 2020-09-25 19:48:36Z

3

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>

edited Sep 25, 2020 at 19:48

answered Sep 25, 2020 at 17:59

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

WebDevGuy2 Over a year ago

Thanks! On the ASPX page, once you put the vue 3 reference, how would I just "dynamically" print out hello world using vue 3? (simplest way) @Daniel

Daniel Over a year ago

added example, you can use composition API or class-based components, or even mix if you like. Porting from Vue 2 should be straight forward, but you may find some gotchas, especially around 3rd party libraries

WebDevGuy2 Over a year ago

Thanks @Daniel - Was your example using composition API or class based components?

Daniel Over a year ago

it's not using composition API (that would have setup() function)

Boussadjra Brahim · Accepted Answer · 2020-09-25 18:02:29Z

1

Based on official docs you could use CDN as follows :

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

answered Sep 25, 2020 at 18:02

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

Adding vue 3 to existing web forms ASPX page

2 Answers 2

Example

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Example

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related