# Vuerouter not loading views

**URL:** <https://discourse.nodered.org/t/vuerouter-not-loading-views/76665>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [17 March 2023 12:27 UTC](https://discourse.nodered.org/t/vuerouter-not-loading-views/76665 "2023-03-17T12:27:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\
**Post date:** [17 March 2023 12:27 UTC](https://discourse.nodered.org/t/vuerouter-not-loading-views/76665/1 "2023-03-17T12:27:44Z")

</div>

Hi,

I am strugling a couple of days with this

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2fb957ada93ebf0658ab4877ac547e96429c4990.jpeg "Create a cool sidebar with Vuejs and vue router (fast and easy)") ](https://www.youtube.com/watch?v=PzVMzwJ35iY)

I want to make an vueJS dashboard in uibuilder, but using http-vue-loader to skip the build step.

I see routes changing but I cant get the content to load.  
win10  
nodeJS14  
node-red 2.6.2  
uibuilder 5.0.1  
[bootstrap] 5.1.3  
[bootstrap-vue] 2.21.2  
[http-vue-loader] 1.4.2  
[jquery] 3.6.0  
[vue] 2.6.14  
[vue-router] 3.5.3

> **[GitHub - nerevaer/uibuilder-dashboard-without-a-build-step](https://github.com/nerevaer/uibuilder-dashboard-without-a-build-step)**
>
> Contribute to nerevaer/uibuilder-dashboard-without-a-build-step development by creating an account on GitHub.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4c1942ed0d323688c803ada1071570e1279d1677.png)

iF you take a look at the picture, I see the topology is right, but content empty.

Thanks for any info inadvance

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 March 2023 13:38 UTC](https://discourse.nodered.org/t/vuerouter-not-loading-views/76665/2 "2023-03-17T13:38:01Z")

</div>

Hi, I'm afraid I've still not managed to find time to play with Vue router myself. However, does this WIKI article help at all?

> **[Using Vue Router](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Using-Vue-Router)**
>
> Easily create data-driven web UI's for Node-RED using any (or no) front-end framework. - TotallyInformation/node-red-contrib-uibuilder

Also, do you get any errors in the browser console?

---

<div class="post-metadata">

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\
**Post date:** [17 March 2023 13:47 UTC](https://discourse.nodered.org/t/vuerouter-not-loading-views/76665/3 "2023-03-17T13:47:07Z")

</div>

Hello and ty for answering.

It does help, but I wanted to skip using router.js and store.js. Also, I wanted to create a nice looking sidebar like in the video, using plain CSS (as I have very little experience with bootstrap).

Anyway, after 2 days I've finally managed to get this working.  
The problem was in using route children. Now I remember I had this problem last year also.

Here is the corrected code:

```auto
<template>
    <div class="dashboard">
        <!--<router-view></router-view>-->
        <Sidebar></Sidebar>
        <div class="content">
            <router-view></router-view>
            <!--<router-view name="Sidebar"></router-view>-->
        </div>
    </div>
</template>

<script>
const Sidebar = httpVueLoader('../components/Sidebar.vue');
const Messages = httpVueLoader('./Messages.vue');
const Overview = httpVueLoader('./Overview.vue');

const routeDefs = [
    {
        path: '/',
        component: Sidebar
    },
    {
        path: '/overview',
        component: Overview
    },{
        path: '/messages',
        component: Messages
    }
]
module.exports = {
    /** Allow greeting and who to be passed as parameters but provide defaults
     * @see https://vuejs.org/v2/guide/components-props.html#Prop-Validation
     */
    router: new VueRouter({routes: routeDefs}),
    components: {
        'Sidebar': Sidebar,
        'Overview': Overview,
        'Messages': Messages
    }
}
</script>

```

Also, for "nice" sidebar effects like this  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8f9d7b62bdd818647d27e7ca40e4250577fff7fd.png)

the usage of "old" VueJS 2 `router-link` is mandatory:

```auto
            <router-link to="/overview" active-class="active" tag="button" exact class="side-btn">
                <div class="link-container">
                    Overview
                </div>
            </router-link>

```

My VS reported the `tag="button"` is depreciated, but then I saw he doesnt know I still use VueJS 2.

Anyways, alot of trial and error. As this is a new project, I guess I'll be on the forum more often from now on 🙂

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 March 2023 15:22 UTC](https://discourse.nodered.org/t/vuerouter-not-loading-views/76665/4 "2023-03-17T15:22:41Z")

</div>

> [@nerevar](#):
>
> Also, I wanted to create a nice looking sidebar like in the video, using plain CSS (as I have very little experience with bootstrap).

If you don't need bootstrap or the additional components in bootstrap-vue, you don't, of course, need to load that at all. There are also other extensions such as Quasar which might be more to your liking. Though I found in the past that one of the nice things about bootstrap-vue was the lack of needing a build step. However, I think some of the other Vue extensions have also caught up.

Bootstrap not too hard to understand though and is pretty well documented.

> [@nerevar](#):
>
> The problem was in using route children. Now I remember I had this problem last year also.

Phew, so not specifically a uibuilder issue. 🙂

> [@nerevar](#):
>
> As this is a new project, I guess I'll be on the forum more often from now on

Look forward to hearing about your experiences. Will help wherever I can.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 May 2023 15:22 UTC](https://discourse.nodered.org/t/vuerouter-not-loading-views/76665/5 "2023-05-16T15:22:51Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.