CODEWITHSUNDEEP
asp.net-corevue.jssingle-page-application
raklos
raklos

Reputation: 28545

integrate vue js with asp.net core 2.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.

Upvotes: 1

Views: 2328

Answers (3)

Adil H. Raza
Adil H. Raza

Reputation: 1711

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/

Upvotes: 0

Danijel
Danijel

Reputation: 1185

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.

Upvotes: -1

Millard
Millard

Reputation: 456

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>

Upvotes: 2

Related Questions