aacassandra / vue3-progressbar

https://www.npmjs.com/package/@aacassandra/vue3-progressbar
MIT License
55 stars 14 forks source link

Component not rendered #14

Open GintarukasDD opened 1 year ago

GintarukasDD commented 1 year ago

I am trying since about two days to make this component work within my single page trials.

main.js

import { createApp } from "vue"
import { createPinia } from "pinia"
import App from "./App.vue"
import router from "./router"
import VueProgressBar from "./components/progressBar"
import * as Application from "@/config/application_config"
import {useCurrentUserStore} from "@/stores/CurrentUser"
import {useApplicationStore} from "@/stores/Application"

const app = createApp(App);
const pinia = createPinia(app);

/*make variables from @config/application_config.js file globally available*/
app.config.globalProperties.ApplicationConfig = Application.Config;
const ApplicationConfig = app.config.globalProperties

const ProgressBarOptions = {
    color: "#bffaf3",
    failedColor: "#874b4b",
    thickness: "5px",
    transition: {
        speed: "0.2s",
        opacity: "0.6s",
        termination: 300,
    },
    autoRevert: true,
    location: "left",
    inverse: false,
};

app.use(VueProgressBar, ProgressBarOptions).use(pinia).use(router).mount('body');

/*
* Router specific stuff
* */
router.beforeEach((to) => {
    const CurrentUserStore = useCurrentUserStore();
    const ApplicationStore = useApplicationStore();

    ApplicationStore.UserInterface.IsLoading = true;

    if (to.meta.requiresAuth && !CurrentUserStore.Data.IsAuthenticated) return { name: 'login' }
})

router.afterEach(() => {
    const ApplicationStore = useApplicationStore();
    ApplicationStore.UserInterface.IsLoading = false;
})

export { app, ApplicationConfig }

app.vue

<script setup>
import {getCurrentInstance, onMounted} from 'vue'
import { RouterView } from "vue-router"
import TopNavigation from "./components/navigation/TopNavigation.vue"
import SideNavigation from "./components/navigation/SideNavigation.vue"
import VueProgressBar from "./components/progressBar"

import {useCurrentUserStore} from "@/stores/CurrentUser";
const CurrentUserStore = useCurrentUserStore();

onMounted(() => {
    const internalInstance = getCurrentInstance();
    //  [App.vue specific] When App.vue is first loaded start the progress bar
    internalInstance.appContext.config.globalProperties.$Progress.start();
    setTimeout(() => {
        internalInstance.appContext.config.globalProperties.$Progress.finish();
    }, 3500);
})
</script>

<template>
    <TopNavigation v-if="CurrentUserStore.Data.IsAuthenticated" />

    <div class="page-content">
        <SideNavigation v-if="CurrentUserStore.Data.IsAuthenticated" />

        <div class="content-wrapper">
            <div class="content">
                <RouterView />
            </div>
        </div>
    </div>

    <vue-progress-bar></vue-progress-bar>
</template>

<style scoped></style>

The component is shown as anonymous component within the vue def tools and I am not seeing anything of the progress bar. Not after startup nor while navigating two different "views" in router-view.

Is there somebody who could help me?