Here is a quick walk through on creating a project that contains both a dot net core web api as well as a vue.js front end.

To get started we enter the following command line

this will create a simple net core web api project

next we will use the vue cli to create the vue app

the vue cli will warn that the directory already exists. Choose the merge option.

Then select the features you would like in your Vue application such as Vue Router , Vuex, Linter, Unit Testing, etc

Once all features are selected the vue cli will create a simple vue app to get started.

To support hot module reloading (HMR) we need to install the following two modules

navivgate to the vie_and_dotnet folder and run the following command line

next we need to configure Vue to stop using its HMR and to redirect its output to the wwwroot folder

to do this we create the following vue.config.js file

next we need to modify startup.cs as follows

thats all there is.  You can start debugging and after a little while the browser should start and show the vue js app.

but now lets see if we can call the web api. In order to do that we will install axios first as follows

now lets add a view called Values.vue with the following content

then we will need to add a route as follows

and lat but not least a router link

when navigating to the values page it will call the web api endpoint and show the information on the page

Michael Salzlechner is the CEO of StarZen Technologies, Inc.

He was part of the Windows Team at Data Access Worldwide that created the DataFlex for Windows Product before joining StarZen Technologies. StarZen Technologies provides consulting services as well as custom Application development and third party products