integrate vue js with asp.net core 2.1 - asp.net-core

Question

Can someone help with explaining how I can use vue.js with asp.net core 2.1.
ideally i'd just like to hit f5 in visual studio 2017 and the website load.
i know ms previously had spa templates but they seem to have been abandoned. theres a starter template on github too but that is using .net core 2.0.

Answer 1

I am trying to use Vue.js with MVC Core 2.1 for a multi page application at the moment, and have found a working solution.
I see you mention SPA though, my answer will be for Multi page apps, but some of the ideas may apply.
My approach
I've created a main.js file in wwwroot/resources/js/ and a components subfolder within that directory - and also a layout folder in the components one.
In the main.js I create a Vue instance and attach it to #app root element in the HTML. In this js file, I also register most of the components globablly, unless they are only needed for specific components. My main.js looks something like this:
# wwwroot/resources/js/main.js
import Vue from 'vue';
import Axios from 'axios';
import BaseLayout from './components/layout/BaseLayout.vue';
window.axios = Axios;
Vue.component("base-layout", BaseLayout);
new Vue({
el: "#App"
});
In the _layout.cshtml file I have the following (relevant content):
# Views/Shared/_Layout.cshtml
<div id="App">
<base-layout>
#RenderBody()
</base-layout>
</div>
<script src="~/resources/js/bundle.js"></script>
If you are only interested in SPA - I would probably do something like:
# wwwroot/resources/js/main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: "#app",
render: (h) => h(App)
});
# wwwroot/resources/js/App.vue
<template>
<div id="app">
<-- Use other components here -->
</div>
</template>
<script>
export default {
name: "app",
data: function() {
return {
// What evs
}
}
}
</script>

Answer 2

VueJs (along with Angular and ReactJs) was available at one stage from the new project but was removed later on because of limited maintainers. However you can still create a VueJs app via command line. Run dotnet new -l to see the list of available dotnet templates.
if you don't see vuejs in the list, install the templates
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
Once you create the web app, and open it in the VS you should be able to run it like any other project, by hitting F5.
There are a few good resources online :
Asp.NETCore 2.1 Vue 2 Starter - by DevHelp.Online
Creating a VueJS (with TypeScript) SPA on ASP.Net Core 2.1
Second link mentions that vuejs template is still available via command line.
Also i found this series very informative, explains from setting up to deployment.
https://code-maze.com/net-core-series/

Answer 3

If you are building a multi-page application, you can take a look at this template as an example or starting point.
https://github.com/danijelh/aspnetcore-vue-typescript-template
If you're building an SPA, consider splitting your API from your UI and use Vue CLI 3 for the UI part.