Integrating VueJS into ASP.NET Core without nodejs, webpack, or npm

Question

Due to security reasons we cannot install nodejs and any package managers. THerefore, I am trying to build my SPA with cdn support only. However, I am struggling to get it to work as I keep getting the failed to mount template error when running my code. I am using ASP.NET core 3.1 and i am able to get to the page to load up my partial views showing the side navigation and top navigation items. The page loads up and the router seems to work in changing the url in browser but the view components for the actual page templates do not show up on the screen. For instance dashboard view should show up but does not and therefore i believe this is where the issue is but I cannot see any issues with my code.

My code is as follows: _vueapp:

<!DOCTYPE html>
<html lang="en">
<head>
    @RenderSection("Styles", required: false)
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>@ViewData["Title"] - ARMS 2.0</title>
    <link rel="stylesheet" href="~/css/sidebar.css" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
    @RenderBody()
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

index file

@page
@model ARMS_2._0_LOCAL.Pages.vue.IndexModel
@{
    Layout = "_Vueapp";
}

<div id="app" v-cloak>
    <side-navigation></side-navigation>
    <top-navigation></top-navigation>
    <router-view></router-view>
</div>

@section Scripts
{
    <partial name="components/side-navigation" />
    <partial name="components/top-navigation" />
    <partial name="views/dashboard" />
    <partial name="views/reviews" />

    <script>

        //setup routing using SPA VUE interface
        Vue.use(VueRouter);
        const routes = [
            { path: '/', component: dashboard },
            { path: '/reviews', component: reviews }
        ]
        const router = new VueRouter({
            routes // short for `routes: routes`
        })

        var app = new Vue({
            el: '#app',
            router
        }).$mount('#app')
    </script>
}

side-navigation:

<style>

</style>
<template id="side-navigation">
    <div>
        <router-link to="/">Home</router-link>
        <router-link to="/reviews">Reviews</router-link>
    </div>
</template>
<script>
    Vue.component('side-navigation', {
        template: '#side-navigation'
    })
</script>

one of my views which is dashboard:

<style>

</style>
<template id="dashboard">
    <div>
        <h1>dashboard</h1>
    </div>
</template>
<script>
    Vue.component('dashboard', {
        template: '#dashboard'
    })
</script>

mj1313 · Accepted Answer · 2021-03-29 08:10:35Z

1

You need to assign the components (dashboard and reviews) to a constant, otherwise the router can not recognize them.

dashboard:

<style>
</style>
<template id="dashboard">
    <div>
        <h1>dashboard</h1>
    </div>
</template>
<script>
    const dashboard = Vue.component('dashboard', {
        template: '#dashboard'
    })
</script>

reviews:

<style>
</style>
<template id="reviews">
    <div>
        <h1>reviews</h1>
    </div>
</template>
<script>
    const reviews = Vue.component('reviews', {
        template: '#reviews'
    })
</script>

edited Mar 29, 2021 at 8:10

answered Mar 29, 2021 at 6:55

mj1313

8,5172 gold badges17 silver badges34 bronze badges

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

2 Comments

Qiuzman Over a year ago

Wow you are right! Is this becauase the line path: '/reviews', component: reviews views reviews as a variable? Also, I have vue stored on the site in it's one folder so to get to this instance of vue I go to localhost/vue/ in IIS Express (visual studio 2019) and it allows me to access it. Is there a reason that vue creates a # because it shows up as localhost/vue#/ for some reason. Figured this might because these are virtual URL directories but I am wondering if there is a way to remove it.

mj1313 Over a year ago

Add mode: 'history' in VueRouter.

Collectives™ on Stack Overflow

Integrating VueJS into ASP.NET Core without nodejs, webpack, or npm

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related