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 — Bert
– Bert, Commented Sep 23, 2017 at 13:09

Shay · Accepted Answer · 2017-09-23 14:32:13Z

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, 2017 at 14:32

Shay

3531 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

brother Over a year ago

Does vueify for Gulp not do the same? Or?

Shay Over a year ago

Yeah, but you need to build a distributable file. vuejs.org/v2/guide/single-file-components.html I would advise following this plan

Collectives™ on Stack Overflow

Using VueJS in a ASP project

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related