CODEWITHSUNDEEP
asp.netvue.jsvue-componentvuejs3
WebDevGuy2
WebDevGuy2

Reputation: 1249

Adding vue 3 to existing web forms ASPX page

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?

Upvotes: 1

Views: 2762

Answers (2)

Daniel
Daniel

Reputation: 35724

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>

Upvotes: 3

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Based on official docs you could use CDN as follows :

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

Upvotes: 1

Related Questions