Visual Studio Code Vuejs Example
For this example, we will not use Vuex for state management because this app will be simple and not complicated. We will create an application where the user can create, update, read, and delete the post. So, let us start the MEVN Stack Tutorial with an example. We install Vue.js project using Vue CLI. Introduction to Vue.js with a Single Page Application (SPA) in Visual Studio Vue.js is a versatile JavaScript Framework that has many benefits for the developer building.NET web applications. It is, however, not easy to get started with this framework. I'm using Visual Studio Code and attempting to configure the Debugger for Chrome extension to work with my webpack project created via vue-cli. I am able to attach to the correct instance of Chrome and see logged info in the Debug Console. But I am not able to add breakpoints in the scripts of my.vue files. Vuejs Form Example Summary. We learned a good deal about forms and VueJs in this tutorial. We covered how to use all of the standard html form controls in addition to creating our very own custom control as a Vue component.
VueJS (Vue) 2 is gaining popularity as a lightweight, powerful web-based UI framework, official website defines it as
Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.
It’s quite easy to work VueJS and ASP.NET MVC 5, let’s check out in this article
Use either Visual Studio 2019/ 2017/ 2015 (any edition) for working (integrating) Vue with MVC 5. You can either use any existing or create a brand new ASP.NET MVC 5.
Step 1 – Install VueJS using NuGet
VueJS can be used either through CDN or by using the NuGet package manager in ASP.NET MVC 5. Let’s use NuGet, right-click on the project to open the NuGet package manager window, search for Vue, and then install it.
Add VueJS using NuGet
Once installed, it will add two files vue.js and vue.min.js (minified version) in the Scripts folder
Step 2 – Add VueJS script in _Layout page
Just like other JavaScript pages, refer Vue in the _layout cshtml page, so that its available across the application.
We can bundle Vue in BundleConfig.cs, but here let’s keep it simple.
Step 3 – First VueJS code
Open About.cshtml file (any cshtml), copy below code to declarative render on HTML page.
Breaking down the above code
- aboutPage is just the usual DIV tag of HTML.
- new Vue() is initializing the VueJS.
- The initialized Vue object execution scope is limited to the aboutPage DIV element. This is achieved by assigning the reserved keyword el to the id of the div element. This is similar to AngularJS 1.* concept.
- To render anything on UI, we are using the data keyword as JS object. The data object has a message property to be displayed inside the DIV tag.
- {{message}} is text interpolation syntax to access the message property of Vue instance. This is again similar to AngularJS 1.* concept.
The el of the new Vue instance should match with the HTML DOM id property to kick off Vue
Step 4 – VueJS in action
Run the application, navigate to the HTML page where Vue is defined to see its action.
Step 5 – Vue’s Reactive nature
When running the application, open the console window of the browser (Chrome in this example), you can play with the message property of the Vue instance as shown in the image below. As soon as you change the message property value, the DOM gets changed automatically
Reactive nature of VueJS
The data and the DOM are now linked, and everything is now reactive.
Deploying Vue.JS App made easy using an extension available on Visual Studio Code. In this blog, I’ll guide you on how to create your app service on Azure where you will be able to deploy your Vue.JS app in that instance.
FTF (First Things First)
- Make sure you have an Azure Subscription to continue. If you don’t have a subscription, you can register your own free trial here https://azure.microsoft.com/en-us/free/
- Visual Studio Code installed, of course amigo.
- Vue.JS Application
- A cup of coffee or tea ☕ (Optional)
1. Create Your Azure App Service
1.1 Go to the https://portal.azure.com and search for “App Services” on the search box. Choose the “Create app service” or click the “Add” button.
1.2 Configure the app service based on your preferences.
In this sample, I’m using Free F1 but, you can choose other plans depending on your preferred machine specifications.
1.3 Review and click “Create” when you’re done. Wait until it’s done then you can view your app service overview like the image below.
2. Install Extension on your Visual Studio Code
2.1 Open your Visual Studio Code and navigate to the “Extensions” tab. 2.2 Look for “Azure App Service” then click “Install”
3. Deploying your Vue.JS App
3.1 Build first your app using npm run build command and wait until it finishes.3.2 Click the Azure Extension logo on the left side and Sign In your Azure Account. This will open a browser tab where you should login your microsoft account with Azure Subscription.
React Js
After you successfully login your azure account, you’ll be able to see this.
Option #1
3.3.a Right click your app service, in my case, it’s the “myvuejsapp” then choose the “Deploy to Web App…”3.4.b Browse the “dist” folder then select it.
Visual Studio Code Vue Plugin
Option #2
3.3.a Just simply right click the “dist” folder then choose the “Deploy to Web App…” and choose the app service you want to target. In my case, it’s the “myvuejsapp”
Wait until it finishes deploying then you’re done.
Lastly, visit your site.
Voila! You have now vue.js running and hosted on Azure App Service.
You can also visit this wiki to learn more about this extension.
Visual Studio Code Vue Extension
If you have some questions or comments, please drop it below 👇 :)