I’m a big fan of Vue JS and .NET platform on the same page. I got pretty satisfying results using both in projects of any size and complexity.
By default, the Visual Studio does not have any native template specifically for Vue JS + Asp.Net Core, like it has for Angular + Asp.Net Core. Setup from scratch a Vue JS application including routes, initial components, API call configuration, CSS libraries (and others) may take a little time. Additionally, the integration with Asp.Net Core in the same project requires the use of a custom Middleware and extra configurations on Startup.cs.
Because of that, I created to help the technical community my own template of Vue JS 3.0 and Asp.Net Core 5.0 Web API application. You can download the extension for Visual Studio 2019 over here:
Vue JS 3.0 with .NET 5 Web API - Visual Studio Marketplace
Extension for Visual Studio - Project Template For Asp.Net Core 5 Web API and Vue JS 3, including examples for API…
To use it just download the extension at the given link and follow the step by step after executing the file:
After the installation, a new project type will be available on Visual Studio. Choose the option to create a new project and search template by name:
The structure of the project looks like the image below, having the following items:
ClientApp folder with the Vue JS 3.0 application, including:
- Counter, Fetch Data, Nav Menu and Home components
2. Vue Router and Axios installed (Vue JS 3.0 version)
3. Router folder
Asp.Net Core 5.0 Web API
API Controller with Forecast API presented on the standard underlying project.
All the extra needed settings on Asp.Net Core Startup file were already made as well on Startup.cs, including the mandatory packages for Vue JS SPA Middleware:
Run the project
After creating the project, the only thing that you need to do is running it. If the node packages are not installed yet, the application will run npm install under the folder “ClientApp”, as seen in the following image:
After the installation of all npm packages, the application will start as it follows:
Get more information on .NET 5 on the official documentation:
Announcing .NET 5.0 | .NET Blog
We're excited to release .NET 5.0 today and for you to start using it. It's a major release - including C# 9 and F# 5 …
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 3.0 + Asp.Net Core 5.0 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.
Feel free to contact and follow me in one of the social media profiles: