1

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.

1

3 Answers 3

2

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>
Sign up to request clarification or add additional context in comments.

Comments

0

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.

enter image description here

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/

1 Comment

why is this down voted? answers exactly what the question is about.
-1

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.