Nuxt•2y ago

Nuxt doesn't update document when data is changed on created

I've this code:

<template>
    <Header @menuClicked="() => (showSideBar = !showSideBar)" />
    <main :showSideBar="showSideBar">
        <NuxtPage />
    </main>
    <Footer />
</template>

<script>
    export default defineNuxtComponent({
        data() {
            return { showSideBar: true }
        },
        created() {
            if (!process.client) return
            if (globalThis.window.innerWidth <= 800) {
                this.showSideBar = false
            }
        }
    })
</script>

<template>
    <Header @menuClicked="() => (showSideBar = !showSideBar)" />
    <main :showSideBar="showSideBar">
        <NuxtPage />
    </main>
    <Footer />
</template>

<script>
    export default defineNuxtComponent({
        data() {
            return { showSideBar: true }
        },
        created() {
            if (!process.client) return
            if (globalThis.window.innerWidth <= 800) {
                this.showSideBar = false
            }
        }
    })
</script>

So, by default showSideBar is true. But if the window width is <= 800, then the showSideBar becomes false. Now that the value of showSideBar is false the value of showSideBar attribute in main element should change to false. But it doesn't change

27 Replies

RifatOP•2y ago

You can also run

        mounted() {
            console.log(this.showSideBar)
        }

        mounted() {
            console.log(this.showSideBar)
        }

to confirm that the value changes but the document doesn't update.

manniL•2y ago

@Rifat please attach a stackblitz or codesandbox for these scenarios it is way easier to provide help

manniL•2y ago

https://stackblitz.com/edit/nuxt-discord-rifat-sidebar?file=app.vue

Alexander Lichter

StackBlitz

Nuxt - Discord - StackBlitz

https://discord.com/channels/473401852243869706/1088754124251734016

manniL•2y ago

Works fine for me

RifatOP•2y ago

@manniL / TheAlexLichter nope doesn't work

RifatOP•2y ago

keep this <= 800 px

manniL•2y ago

Uhm?! 😄

RifatOP•2y ago

I'm talking about the attribute in main

manniL•2y ago

If you want to act on rezise, you need a listener to the resize event 🙂

RifatOP•2y ago

no no. Not resize @manniL / TheAlexLichter check this out https://stackblitz.com/edit/nuxt-discord-rifat-sidebar-1wltgc?file=app.vue

RifatOP•2y ago

manniL•2y ago

Ahh, sorry got it Yeah, hydration error when you do it like that move it to beforeMount

RifatOP•2y ago

The content inside main changed but attribute not changed

manniL•2y ago

you should see such an error when using created + "showing"/rendering the sidebar state because it expects "same results" from client and server that's why moving to onBeforeMount is the best you can do here Updated the sandbox Does that work as expected?

RifatOP•2y ago

No. The attribute doesn't change.

manniL•2y ago

indeed. and still errors then moving it to mounted

RifatOP•2y ago

<script>
// https://discord.com/channels/473401852243869706/1088754124251734016
export default defineNuxtComponent({
  data() {
    return { showSideBar: true };
  },
  beforeMount() {
    this.showSideBar = false;
  },
});
</script>
<template>
  <main :show-side-bar="showSideBar">
    <p>Check the attribute of main element. It was supposed to be false but it's true</p>
  </main>
</template>

<script>
// https://discord.com/channels/473401852243869706/1088754124251734016
export default defineNuxtComponent({
  data() {
    return { showSideBar: true };
  },
  beforeMount() {
    this.showSideBar = false;
  },
});
</script>
<template>
  <main :show-side-bar="showSideBar">
    <p>Check the attribute of main element. It was supposed to be false but it's true</p>
  </main>
</template>

manniL•2y ago

might be the only way it won't trigger hydration errors

RifatOP•2y ago

It's slow I tried it that way. mounted works fine

manniL•2y ago

How do you mean "it is slow"?

RifatOP•2y ago

It changes after mounting.

manniL•2y ago

Exactly - that's what the name of the lifecycle hook says too 🙂 The problem is: When using SSR, the client expects that the HTML is "the same". If you change values before that, you will see hydration errors But because you can't infer the width on the server, you can only apply the HTML changes on the client

RifatOP•2y ago

Is there any way to change it before mounting??

manniL•2y ago

Hmm 🤔 That specifically will be difficult. Not sure. But you can e.g. set your sidebar to <ClientOnly>, then you might not have a weird flash when hiding and could animate it properly when it appears.

RifatOP•2y ago

Thanks. I will try that. Nuxt doesn't show hydration errors if attribute mismatches. That's why I wasn't able to understand where the problem was. I think it's a bug. Thanks a lot for helping me with this problem 😊.

manniL•2y ago

Yes, weirdly not.

Gaming

Programming

Nuxt doesn't update document when data is changed on created