Vuerouter not loading views

[nerevar]

Hi,

I am strugling a couple of days with this

Create a cool sidebar with Vuejs and vue router (fast and easy)

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

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

Thanks for any info inadvance

[TotallyInformation]

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

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

[nerevar]

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:

<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

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

            <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

[TotallyInformation]

@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.