Vue Components in ASP.NET Core without bundler using http-vue-loader
Tags: JavaScript, Vuejs, Single File Component, Aspnetcore, Vue

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.

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.

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

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.

vue-card2.vue

/wwwroot/js/vue-card2.vue

I simply took my vue-card component from Part 1 and modified it to work with http-vue-loader. The component has the same file structure as defined by Vue Single File Component.

The main difference to our Vue Card 1 component is in the script tag:

Script tag of the Vue component

The component just exports the props. The registering of the component takes place not here, but directly in the Vue App.

4. Modify Vue App in the Index.cshtml file.

Loading and registering of the component take place in the “components” section of Vue App.

Add the following code to the Vue App in the script tag of index.html file

components: {

'vue-card2': window.httpVueLoader('/js/vue-card2.vue')

}

The Vue App should look like this:

Script tag with Vue App

The http-vue-loader loads .vue files per HTTP request.

Check the http-vue-loader documentation on other ways of using it. It can also register components globally or be used as a plugin.

5. Modify Startup.cs to add the mapping to .vue ContentType

Static Files Provider does not serve unknown file types by default.

If we just add the vue-card2.vue file to the JavaScript folder in the project, our component will not work.

404 Error loading vue-card2.vue file

404 Error loading vue-card2.vue file

To fix it we need to make .vue files known by Static Files Provider, by mapping .vue files to some Content-Type. The right Content-Type for Vue Single File Components is “application/javascript”.

Replace the line with app.UseStaticFiles() using the following Gist:

ContentType mapping to for .vue files.

6. Add the second row with vue-card2 to the Index.cshtml file.

7. Start the ASP.NET Core project

If you did everything right, you should see now the second row of cards made with the vue-card2.vue component.

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

If it did not work for you, then please check my working sample project in the git repository below or write about your error in the comments.

GitHub Repository with the sample project:

Pros:

Using http-vue-loader solves the main problem we have in Part 1 (integrating and use of .vue files in the project)

Now we can easily use third-party vue libraries in our Web Application without the needing to modify them.

Cons:

Franck Freiburger, the author of http-vue-loader does not recommend to use the library in production.

I guess, there could possibly be problems with some browsers or environments by loading and compiling of .vue files. Or the library could fail with complicated Vue components.

I haven’t had any problems using http-vue-loader in this sample project.

You can check the Project Issues to see what kind of real-life problems do have the users of http-vue-loader.

The http-vue-loader helps us to quickly test .vue components without using any bundler or building environment.

I am currently working on the migration to Vue v.3.x and will add the updated solution later in the next part.