CODEWITHSUNDEEP
vuejs2nuxt.js
Mike Frampton
Mike Frampton

Reputation: 43

Nuxt - manipulating class properties in the document bodyattrs class

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.

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.

I have set up the app.html page defined in the documentation (https://nuxtjs.org/guide/views#document). I have then set the head like so:

head() {
    return {
        bodyAttrs: {
            class: this.dataLoaded ? "bodyAttr" : ""
        }
    };
}

Here is what the bodyAttr class looks like. This is a default value at startup:

.bodyAttr {
    background: linear-gradient(#0098db, #0046ad);
}

When the data is loaded, I need to dynamically change the background property colors to the values selected by the user configuration.

Is there a way to do this... or am I approaching this from the wrong direction? Thanks.

Upvotes: 4

Views: 5029

Answers (1)

sparkyspider
sparkyspider

Reputation: 13519

I would consider adding and/or removing classes from the body tag and then in your CSS, define styles for those classes.

export default {
    data() {
        return {
            darkMode: false
        }
    },
    head() {
        return {
            bodyAttrs: {
                class: this.darkMode ? 'my-gradient' : 'normal-mode'
            }
        }
    },

}

Then somewhere in your CSS:

.my-gradient {
        background: linear-gradient(#0098db, #0046ad);
}
.normal-mode {
    background: none;
}

In the above examples, setting darkMode to true will apply the my-gradient class to the body tag and setting it to false will apply normal-mode.

Upvotes: 5

Related Questions