[Update] Template — Vue JS + Asp.Net Core 3.1— Visual Studio 2019
By: Alexandre Malavasi
Tags: Net Core, Vuejs, Aspnetcore, JavaScript

ll my friends and people close to me know that I’m fun of Vue JS and .NET Core, at the same time. Among many existent options for developing Single Page Application (SPA), I have special consideration of Vue JS, even I like so much Angular as well.

By default, the Visual Studio does not have any template specifically for Vue JS + Asp.Net Core, like it has for Angular + Asp.Net Core. Setup from scratch a Vue JS application with all necessary configurations sometimes could take a lot of time: webpack, loads of packages, Middleware configuration for SPA in Asp.Net Core startup.

Because of that, I recently created to help the technical community my own template of Vue JS application together with Asp.Net Core 2.2 Web API application in the backend side.

After the Microsoft releases the version 3.1 of .NET Core, I created a new version of the template, using the newest version as well. The template is available at the following link:

Installation

To use it just download the extension at the given link and follow the step by step after execute file. Details in the following images:

Usage

To use it after the installation , just o Visual Studio 2019, escolher a opção para criar um novo projeto e realizar a busca do template. Ele já estará na lista disponível:

To use it after the installation, just open the Visual Studio 2019, choose the option to create a new project e search the template by name. It’ll be already installed and available on the template list:

After that, just confirm the project creation. It is how the structure looks like:

The project has a standard configuration of Asp.Net Core Web Api (2.2 version) and also a Vue JS project setup on the ClientApp folder, with all the basic and needed configurations.

All the extra needed settings on Asp.Net Core Startup file were already made as well, including the mandatory packages for Vue JS SPA Middleware:

“Configure” method:

Run the project

After creating the project, the only thing that you need to do is running it.

PS: in case of the Visual Studio opens a URL different from the root (e.g localhost/api/values), just type the root of the application (the main domain without any folder path) to execute the Vue JS application.

PS(2): it is recommendable to run the npm install command in the root of the Vue JS application before running the project.

Conclusion

I hope that helps you in your daily routine as a software developer, being important stuff to save your time every time you have to create Vue JS + Asp.Net Core application.

In case of any questions, feel free to ask me right here.

Thank you for reading this article till the end. Following are my social media profiles where I frequently share my technical posts and information on IT Events.

Also, I’ve shared the links to Caqui Coders, the Brazilian technical community that I’m one of the organizers.

Twitter: https://twitter.com/alemalavasi

Linkedin: https://www.linkedin.com/in/alexandremalavasi/

My Book

I’m glad to announce that I have my first book published. It is a deep dive hands-on through the most common Design Patterns used in .NET applications. The book contains hundreds of code samples and explanations based on real-world scenarios. It also has many examples of Object-Oriented Programming, SOLID principles, and all the path to get yourself familiar with .NET 5 and C#. Check it out: