title: Nuxt - manipulating class properties in the document bodyattrs class
body: <p>I've been searching for a good solution to dynamically modify the class that can be attached to the bodyAttrs, with no success. I have found no posts that specifically address/answer my situation. I hope someone can help.</p>
  
  <p>I have a project I am working on and in the project I am using Nuxt with SSR functionality,  The site has properties that can be manipulated with user configuration.  Setting the scene... the user can manipulate the body tag, and can change background colors. </p>
  
  <p>I have set up the app.html page defined in the documentation (<a href="https://nuxtjs.org/guide/views#document" rel="nofollow noreferrer">https://nuxtjs.org/guide/views#document</a>). I have then set the head like so:</p>
  
  <pre><code>head() {
      return {
          bodyAttrs: {
              class: this.dataLoaded ? "bodyAttr" : ""
          }
      };
  }
  </code></pre>
  
  <p>Here is what the bodyAttr class looks like.  This is a default value at startup:</p>
  
  <pre><code>.bodyAttr {
      background: linear-gradient(#0098db, #0046ad);
  }
  </code></pre>
  
  <p>When the data is loaded, I need to dynamically change the background property colors to the values selected by the user configuration.</p>
  
  <p>Is there a way to do this... or am I approaching this from the wrong direction? 
  Thanks.</p>