Template — Vue JS 3.0 + Asp.Net Core 5.0 — Visual Studio 2019

Alexandre Malavasi
Nov 29, 2020 · 4 min read

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:

Installation

Usage

The structure of the project looks like the image below, having the following items:

ClientApp folder

  1. 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

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:

ConfigureServices method
Configure method

Run the project

After the installation of all npm packages, the application will start as it follows:

Home page
Counter component
Fetch data component

Extra content

Conclusion

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:

Twitter: https://twitter.com/alemalavasi
Linkedin: https://www.linkedin.com/in/alexandremalavasi/
Youtube: https://www.youtube.com/channel/UC-KFGgYiot1eA8QFqIgLmqA
Facebook: https://www.facebook.com/alexandre.malavasi.dev

Vue.js Developers

Helping web professionals up their skill and knowledge of…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store