Creating a reactive SPA simply within an ASP.Net Core web app with Vue.js
In this post, I will cover how you can quickly and easily use Vue.js to make a reactive 'SPA' within ASP.Net Core. This is a slightly dirty way to do things, but for rapid prototyping or a simple project it does the job just fine without any unnecessary complications. By 'SPA' I mean a Single Page Application, except without any navigation as that's handled by the underlying ASP.Net Core application, as is the API called by Vue.js methods.
<head> tags of your Razor page/view, you'll need to include a reference to Vue.js, for example via a CDN.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
At the bottom of your Razor page/view, you'll need to include a
<script> tag to hold your Vue instance definition. In Vue.js this includes:
- the element to have the Vue instance applied to
- the data object including any default properties
- computed properties (these act as if part of the data object but reactively update like functions)
- methods (functions that can interact with the data object)
In this example, it's a Vue instance for creating invoices and updating stock levels. The above gif shows some of the functionality achieved with this, including dynamically adding classes, and looping through elements in an array with markup for each.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
To hook this into the DOM, just add the element identifier to an element, for example
<div id="create-invoice"> will bind a div to this Vue instance.
Within that, you are free to use a variety of tools, like
v-if, interpolation and
v-on event handlers. In this example, if there's any text in the
successMessage property of the Vue data object, this alert div will be displayed, interpolating the message, and clearing it (thus hiding the alert) when the close button is clicked.
In this example, a
v-for is used to loop through all the products in the array, producing a
<tr> for each of them, with an appropriate class bound from a method taking that product as a parameter.
v-else statements enable conditionally showing one (or none) of three different pooltips. The product's
name property is interpolated and shown, as is the
unitPrice property, which is nicely formatted for readability.
barcode field is mapped to a
v-model, which means as it changes it directly alters the value in the Vue data object, and as that changes this updates reactively. It also makes use of
v-on:blur to run a method that makes an API call to retrieve product data, conditionally sets the disabled property once a barcode has been entered, and binds a class based on the output of a method taking the product as a parameter.
quantity field also uses a
v-model, but specifically forces it to be a number (no need for Typescript here) runs a method on keypress (the
@@ syntax is purely due to Razor escaping, normally you'd only need one) and on change.