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>