Static GitHub Issues

[599] Inline styles do not update properly when SSR

prev: Extend Global SCSS Stylesheet in Component
next: Async not recognized/working as intended

Given a template tag that uses a bound style attribute :style="styles", the styles are not properly updated after the server side rendering. Importantly, the computed properties being used in the style tag are working, but they simply don't get swapped into the style attribute.

Here's a reproduction:

<template>
  <div class="example-bug" :style="styles">
    This container should be {{ size }}px wide with a {{ background }} background.
    <code>
    {{ styles }}
    </code>
  </div>
</template>

<script>
export default {
  data () {
    return {
      size: 300
    }
  },
  computed: {
    styles () {
      return {
        width: `${this.size}px`,
        backgroundColor: this.background
      }
    },
    background () {
      if (this.size < 100) {
        return 'red'
      } else if (this.size >= 100 && this.size < 200) {
        return 'blue'
      } else if (this.size >= 200 && this.size < 300) {
        return 'green'
      } else if (this.size >= 200 && this.size < 300) {
        return 'salmon'
      } else if (this.size >= 300 && this.size < 400) {
        return 'silver'
      } else if (this.size >= 400 && this.size < 500) {
        return 'gold'
      } else {
        return 'yellow'
      }
    }
  },
  methods: {
    resize () {
      this.size = window.innerWidth
    }
  },
  created () {
    if (typeof window !== 'undefined') {
      window.addEventListener('resize', this.resize)
      this.resize()
    }
  }
}
</script>

<style lang="scss">
.example-bug {
  width: 300px;
  background-color: red;
  position: absolute;
  height: 100vh
}
code {
  font-size: 12px;
  display: block;
  padding-top: 1em;
}
</style>

Here is an example of the above (full video here): bug-example

And here is a fresh install of nuxt with the above code: https://github.com/journeygroup/nuxt-style-bug

Somehow the data output in the <code>{{ styles }}</code> block is correct, but the same exact property output in the :style="styles" attribute is not correct. Also, certain changes in the property will trigger the styles to begin working properly. In this particular case, if I make the window small and the 'color' changes (again) it "snap out of it" and start working just fine.

Interestingly, this does not occur when a page has been navigated to with vue-router and the page was not rendered server-side.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c517">#c517</a>)</em></sub></div>