Using VueJS in a ASP project

Question

Currently developing a ASP MVC site. Some sections of the site will use VueJS for displaying some list, forms etc. The project setup is Bower, Grunt, standard C# ASP project using TypeScript.

This is my first time using Vue, and the simple stuff is pretty stragt forward. Seting up a page with a form, getting data from a WebService etc.

My problem/question is, what, and how, do i get the best setup, for using Single File Components (Vue) in my cshtml view files.

So, lets say I have a section on my site, where i want to display orders from the user. Layout, navigation etc is setup by my excisting ASP code. I have a CSHTML viewpage for the current page, pretty vanilla:

@inherits MyViewPage<MyViewModel>
@{
    Layout = "~/Views/layout.cshtml";
} 

<div id"app">

</div>

Thats it for the excisting view page. In this page, i want to include a Vue Single File Component.

Previously i had the markup directly in the CSHTML page, which works fine. But when i want to user Vue-router, it becomes a problem to maintain the different views. So i should move the markup into a Component.

This is the basic setup;

const page1 = { template: '<div>Page1</div>' }
const page2 = { template: '<div>Page2</div>' }
const routes = [
        { path: '/', component: page1 },
        { path: '/page2', component: page2 }
]

const router = new VueRouter({
    routes
})

var vm = new Vue({
    router,
        el: "#app"
})

Lets say i create a .vue file called page1.vue instead. This contains

<template>
my new page
</template>
<script>
    export default {
        name: '?',
        date: function() {

        }
    }
</script>

How do i get this file included in my CSHTML file for instance?

Possible duplicate of [Best approach when replacing jQuery with VueJS 2 in multi-page existing .NET MVC application](https://stackoverflow.com/questions/42541315/best-approach-when-replacing-jquery-with-vuejs-2-in-multi-page-existing-net-mvc) — Bert, Sep 23 '17 at 13:09

score 0 · Answer 1 · answered Sep 23 '17 at 14:32

0

You need to develop with webpack to build Single File Components.

See the Vue documentation on this. Use the Vue Cli and drop a web pack build into your cshtml page.

answered Sep 23 '17 at 14:32

Shay

353
1
11

Does vueify for Gulp not do the same? Or? – brother Sep 23 '17 at 15:01
Yeah, but you need to build a distributable file. https://vuejs.org/v2/guide/single-file-components.html I would advise following this plan – Shay Sep 23 '17 at 16:33

Using VueJS in a ASP project

1 Answers1