Using Vue Components in ASP.NET Core without bundler
Tags: Single File Component, Aspnetcore, JavaScript, Vue, Vuejs

Here is my simple way to use Single File Vue.js Components in an ASP.NET Core project with Razor Pages and without any JavaScript Bundler.

I will show you step-by-step instruction on how to create a simple Vue.js Component with the Bootstrap 4 Card.

1. Create a new ASP.NET Core web application based on the template with Razor Pages

2. Add Vue.js to the project

The new version 3 of Vue.js is out recently and now we can choose between versions 2.x and 3.x.

My solution was developed before the third version of Vue.js (v3.x) was out and uses the second version (v2.6.x). This version fits perfectly in the solution and is very easy to integrate into a project. I will write later about implementing my solution using v3.x version of Vue.js.

The big advantage of the 2.x version is the wide browser support. Using Vue.js v.2.6 we have support to all ECMAScript 5 compliant browsers without any shims or polyfills.

ECMAScript 5 (ES5) is full supported not only by most of the modern devices and systems but also by older ones, like for example Internet Explorer 10 (IE10).

Can I use ECMAScript 5?

Since we will be using Vue with templates, we need to install the full version (Runtime + Compiler). You can read in the Explanation about Different Vue.js Builds

To install Vue.js in your project, open the _Layout.cshtml file in the Pages\Shared folder and add the script tag with the reference to the Vue.js library.

_Layout.cshtml file in the folder Pages\Shared

I will simply use the current development version of Vue from CDN.

<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

Put it between the `site.js` script library and the Razor Pages Section “Scripts”

Vue.js Full Development Version 2.6.12

3. Create a new Razor View named _Card.cshtml in the same folder Pages\Shared.

Creating Razor View _Card.cshtml

This Razor View will be our Single File Vue.js Component

Delete all Razor Pages syntax and add the following code:

_Card.cshtml

Here we have the same structure to any “.vue” component file. There is the block with CSS Style for the component, global registration of the “vue-card” component and the template section with the HTML of Bootstrap 4 Card.

The “vue-card” component has the following parameters (props):

id

name

img

Now we can use our new component anywhere in the project including it as Razor Page partial.

4. Open the File “Index.cshtml” and add the following code with the vue-card component:

Index.cshtml

Now we have added to the start page the new Vue App and our vue-card component.

If you did everything right, after restart the new Card Component should appear on the start page of your web application.

Bootstrap 4 Card Vue Component

Combining Vue Components with the Razor Syntax provides us with a very flexible and powerful solution to build complicated web applications quickly and easily.

For example, here is a quick generation of a Bootstrap Card Deck with 4 cards:

Bootstrap Card Deck with 4 cards

Of course, not using a bundler in the project has some limitations and drawbacks, but let us start with the advantages of this method. :-)

Pros:

decent browser compatibility (starting from IE10)

simple to use

quick to start with

great for building custom Vue Components

Cons:

no bundling and minifying

.vue files are not supported

files are not supported not compatible with other Vue Component Libraries

The biggest drawback of my solution is that you cannot use Vue Single File Components (SFC) placed in .vue files. This means to use some other Vue Component Library you need to convert all .vue files from native Vue Components to Razor Partials. It could be done if you need it, but I would not do it myself.