So starting this off, looking for a Vue.js SPA template within Visual Studio…nope not available. Using command line dotnet new –l you can see it is not within the template package from Microsoft.

Second attempt, is to get the latest template solutions from Microsoft using the following command from a dos prompt.

dotnet new --install microsoft.aspnetcore.spatemplates Unfortunately, the Vue templates are not available within this package (unlike React and Angular templates).

Building our own Vue Template I am going to build one up using existing templates from Microsoft and Visual Studio with the new Vue CLI 3 templating system. Starting off install the vue cli globally on your pc.
npm list –g --depth 0 (to list all globally install packages, depth argument says to list only the top packages not the dependencies)

I have already installed vue cli however doing it again you can see vue was updated from 3.0.1 to 3.1.1 npm install –g @vue/cli

Vue CLI sets up a project with features: hot module replacement, tree-shaking, code-splitting, webpack 4 etc. node –v will display the version of node installed, likewise vue --version gives us the vue.js installed. With vue 3 cli we can use the CLI to create a project or a GUI to set it up. Using the CLI first, we will create a asp.net core solution based on the existing react template. dotnet new react –o aspnet-core-vue-app (this is the same as File-New Project within VS.NET and choosing the react template) Opening the csproj with vs.net (Open Project), and building the project to restore nuget packages, and restoring npm packages (taking several minutes) Make the following changes within Startup.cs configuration.RootPath = 'ClientApp/build'; => configuration.RootPath = 'ClientApp/dist'; app.UseHttpsRedirection(); => // app.UseHttpsRedirection(); comment out (we do not want to deal with https certificates at this moment) Add nuget package VueClieMiddleware

// spa.UseReactDevelopmentServer(npmScript: 'start'); comment out react development server and reference vue
spa.UseVueCli(npmScript: 'serve', port: 8080);

Remove all the contents of the /ClientApp foler and create a new project using Vue CLI and returning to command prompt in a new directory
md vue
cd vue
vue create client-app

selecting with mouse default (babel, eslint)

Moving all the Vue CLI code now to the VS.NET folder ClientApp. I am using Visual Studio in this tutorial (not vscode). 3 ways to run this project 1. Pressing F5 the application runs and to test the hot module reload feature, modify the Welcome message within App.vue while in Debug Mode (F5). You will notice the page reloads showing the change immediately. This is powerful.

2 If however I try to run the project via dotnet run I am getting the following error:
System.InvalidOperationException HResult=0x80131509
Message=Unable to configure HTTPS endpoint. No server certificate was specified, and the default developer certificate could not be found.
To generate a developer certificate run 'dotnet dev-certs https'. To trust the certificate (Windows and macOS only) run 'dotnet dev-certs https --trust'. For more information on configuring HTTPS see https://go.microsoft.com/fwlink/?linkid=848054.
Source=Microsoft.AspNetCore.Server.Kestrel.Core
StackTrace:………….info: Microsoft.AspNetCore.SpaServices[0]

client-app@0.1.0 serve C:\Temp\vue\aspnet-core-vue-app\aspnet-core-vue-app\ClientApp

vue-cli-service serve '--port' '8080' INFO Starting development server... The error message told me to run dotnet dev-certs https --clean
I tried but ended up with this error message

Cleaning HTTPS development certificates from the machine. A prompt might get displayed to confirm the removal of some of the certificates.
There was an error trying to clean HTTPS development certificates on this machine.
Sequence contains no matching element

I was able to eventually resolve this issue (later) by opening “Manage user certificates”, removing any certificates with friendly names like “ASP.NET Core HTTPS development certificate”. Apparently there was a corruption in my local certificates and removing all resolved it.

I did this under Certificates Current User – Personal > Certificates (sort by friendly name, select all and remove) Trusted Root

Once this was complete I re-ran the dotnet dev-certs https --trust per the error message, I was then prompted with ‘A confirmation prompt will be displayed if the certificate was not previously trusted. Click yes on the prompt to trust the certification’.. (Reference: https://github.com/aspnet/AspNetCore/issues/3421)

3 With a command prompt, cd to the ClientApp directory and npm run serve (after you can browse to the site via http://localhost:8080 as the on screen instructions provide) Let’s do this again, but instead of creating the vue app via the vue cli this time I will use the vue ui to build the vue app. Create another React application using the template within Visual Studio. Make the same modifications as above to the Startup.cs. Using vue ui command line and the browser based wizard create another vue app named ClientApp. When complete copy it to your Visual Studio project on top of the existing ClientApp folder. A browser opens with the Vue GUI options A vue app is created on the file system, which will be copied again to our Visual Studio project (on top of the ClientApp directory) that was the original React application. Build the project…. ========== Rebuild All: 1 succeeded, 0 failed, 0 skipped ========== 1. Pressing F5 to run the application, you can see within the Output – Debug window the operations… Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager:Information: User profile is available. Using 'C:\Users\dyardy\AppData\Local\ASP.NET\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at rest.
Microsoft.AspNetCore.SpaServices:Information: Starting server on port 8080...
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/1.1 DEBUG http://localhost:50557/ 0
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 32.0777ms 200
Microsoft.AspNetCore.SpaServices:Information: > ClientApp@0.1.0 serve C:\Temp\vue\aspnetcorevueappGui\aspnetcorevueappGui\aspnetcorevueappGui\ClientApp

vue-cli-service serve '--port' '8080'

INFO Starting development server...
Microsoft.AspNetCore.SpaServices:Information: DONE Compiled successfully in 19505ms15:42:01
Microsoft.AspNetCore.SpaServices:Information:
App running at:

• Local: http://localhost:8080/
• Network: http://192.168.1.101:8080/ Note that the development build is not optimized.

Microsoft.AspNetCore.SpaServices:Information: To create a production build, run npm run build. The browser did open navigated to https://localhost:50557/ changing this to http://localhost:50557 my new project opened up. Also http://localhost:8080/ works well to. Ok so that is the end of this initial getting started with Vue.js and ASP.NET Core. Primarily this was using templates from Visual Studio, with modification then relying on Vue.js CLI (command line and gui to build a new template based on vue.js).