Search code examples
vue.jsasp.net-corevuejs2vuexrazor-pages

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

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/vue@2.6.12/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>
Solution

  • 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>