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

42 messages · Page 1 of 1 (latest)

vagrant plinth
#

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>

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

#

You can also run

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

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

unreal crater
#

@vagrant plinth please attach a stackblitz or codesandbox for these scenarios

#

it is way easier to provide help

#

Works fine for me

vagrant plinth
#

@unreal crater nope doesn't work

image.png
#

keep this <= 800 px

image.png
unreal crater
vagrant plinth
#

I'm talking about the attribute in main

unreal crater
#

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

vagrant plinth
#

no no. Not resize

unreal crater
#

Ahh, sorry

#

got it

#

Yeah, hydration error when you do it like that

#

move it to beforeMount

vagrant plinth
#

The content inside main changed but attribute not changed

unreal crater
#

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?

vagrant plinth
unreal crater
#

then moving it to mounted

vagrant plinth
# 
<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>
unreal crater
#

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

vagrant plinth
#

I tried it that way. mounted works fine

unreal crater
#

How do you mean "it is slow"?

vagrant plinth
#

It changes after mounting.

unreal crater
#

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

vagrant plinth
#

Is there any way to change it before mounting??

unreal crater
#

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.

vagrant plinth
vagrant plinth
#

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