Answered by:
using web forms with Vue

Question
-
User887623398 posted
Hi,
Is it possible to use Vue with web forms?
regards,
Saeed
Thursday, August 9, 2018 6:57 PM
Answers
-
User283571144 posted
Hi SaeedP,
How should I define Vue in the header of my page?
Does it have CDN like jquery?
Yes, it contains the CDN library.
https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
We could create an easy example in the webform.
Like below:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Vuew.aspx.cs" Inherits="AspNetNormalIssue.Webform.Vuew_" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script> </head> <body> <form id="form1" runat="server"> <div id="app"> <input type="text" name="name" v-model="name" /> {{name}} </div> </form> <script> let app = new Vue({ el: '#app', data: { name:'hello world' } }) </script> </body> </html>
Result:
Best Regards,
Brando
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, August 14, 2018 6:19 AM
All replies
-
User283571144 posted
Hi SaeedP,
SaeedP
Is it possible to use Vue with web forms?Yes, it is possible.
The vue is the client side framework. We could use it in the asp.net web form.
I suggest you could develop with webpack to build Single File Components in the web form.
Details, you could refer to below article.
https://vuejs.org/v2/guide/single-file-components.html
https://cecilphillip.com/setting-up-webpack-in-asp-net-web-forms/
Best Regards,
Brando
Friday, August 10, 2018 3:30 AM -
User887623398 posted
<g class="gr_ gr_9 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="9" data-gr-id="9">Thanks</g> Brando for your guidance.
How should I define Vue in the header of my page?
Does it have CDN like jquery?
Friday, August 10, 2018 9:44 PM -
User283571144 posted
Hi SaeedP,
How should I define Vue in the header of my page?
Does it have CDN like jquery?
Yes, it contains the CDN library.
https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
We could create an easy example in the webform.
Like below:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Vuew.aspx.cs" Inherits="AspNetNormalIssue.Webform.Vuew_" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script> </head> <body> <form id="form1" runat="server"> <div id="app"> <input type="text" name="name" v-model="name" /> {{name}} </div> </form> <script> let app = new Vue({ el: '#app', data: { name:'hello world' } }) </script> </body> </html>
Result:
Best Regards,
Brando
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, August 14, 2018 6:19 AM