yukinoshita_sakura Posts - Answer Overflow

yukinoshita_sakura

•Created by yukinoshita_sakura on 1/21/2025 in #❓・help

How to register global listener for window and add css variable with v-bind at nuxt pages/index

I am migrating my vue3 project to nuxt3, but I found that the main page at pages/index.vue is not the root page which also mounts when any page is active. In my vue project, I use app.vue to add dynamic css variable with v-bind and classes uses them and add global onresize eventHandler to window. So how can I let them run globally in nuxt as they did in my vue project? My vue solution is below.

onMounted(() => {
    window.onresize = () => {
        return (() => {
            store.commit('windowInf/setDocumentBodySize', [document.body.clientWidth, Math.max(document.body.clientHeight, document.documentElement.clientHeight)])
        })()
    }
})

onMounted(() => {
    window.onresize = () => {
        return (() => {
            store.commit('windowInf/setDocumentBodySize', [document.body.clientWidth, Math.max(document.body.clientHeight, document.documentElement.clientHeight)])
        })()
    }
})

.page{
    --main-bg-color: v-bind('theme.list.mainColor');
    --second-bg-color: v-bind('theme.list.secondColor');
    --accent0-bg-color: v-bind('theme.list.accentColor[0]');
    --accent1-bg-color: v-bind('theme.list.accentColor[1]');
    --main-font-color: v-bind('theme.list.mainFontColor');
    --second-font-color: v-bind('theme.list.secondFontColor');
    --main-button-color: v-bind('theme.list.buttonColor');
    --main-button-hover-color: v-bind('theme.list.buttonHoverColor');
    background-color: var(--main-bg-color);
}

.page{
    --main-bg-color: v-bind('theme.list.mainColor');
    --second-bg-color: v-bind('theme.list.secondColor');
    --accent0-bg-color: v-bind('theme.list.accentColor[0]');
    --accent1-bg-color: v-bind('theme.list.accentColor[1]');
    --main-font-color: v-bind('theme.list.mainFontColor');
    --second-font-color: v-bind('theme.list.secondFontColor');
    --main-button-color: v-bind('theme.list.buttonColor');
    --main-button-hover-color: v-bind('theme.list.buttonHoverColor');
    background-color: var(--main-bg-color);
}

6 replies

Gaming

Programming