WEB DEVELOPMENT | ASP.NET CORE | VUE.JS

Vue Components in ASP.NET Core without bundler using http-vue-loader

Another simple way to use Vue.js Components in ASP.NET Core Web Application without any JavaScript bundler.

Tolbxela
4 min readDec 26, 2020

--

The Vue Card 2 Component (vue-card2.vue)

Link to Part 1. Using ASP.NET Core Razor Partials

Part2. Using http-vue-loader

This is the second part of the story “Using Vue Components in ASP.NET Core without bundler”. Here is Part 1, if you haven’t read it yet.

I have found an another nice way to achieve the same result as in Part 1 is to use http-vue-loader library made by Franck Freiburger.

I have read about using http-vue-loader in the story “Using Vue.js Single File Component Without Module Bundlers” written by James Wee

This library loads .vue files directly from the HTML page or JavaScript without any JS Bundler and build steps.

It was interesting for me to give it a try with my ASP.NET Core project from Part 1.

This is a step by step instruction on how to create the new vue-card2 using http-vue-loader.

If you do not want to do all the steps, then just go to the end of the story and download ready to use project.

  1. Get the ASP.NET Core Vue project from Part 1.

2. Add the reference to the http-vue-loader library in the file _Layout.cshtml

<script src="https://unpkg.com/http-vue-loader"></script>

3. Create new vue-card2.vue component in the folder wwwroot/js

Download the following gist vue-card2.vue file to the folder wwwroot/js in the project.

--

--

Tolbxela

Born, Learned, Studied, Coding…