CODEWITHSUNDEEP
javascriptvue.jsvuejs2bulmabuefy
Ragadabing
Ragadabing

Reputation: 482

Add css class to HTML or BODY tag in Vue.js 2.0

I'm using the CSS Framework Bulma, respectively their Navbar component. For this to work well I need to add a css class to the HTML or Body element:

<html class="has-navbar-fixed-top">

How can I add a class using vue.js 2.0?

Upvotes: 2

Views: 4899

Answers (4)

user956584
user956584

Reputation: 5559

@click="$root.htmlclass = 1"

.....

  watch: {
    "htmlclass":{
      handler(v){  
        if ( v ) {
          $('body').addClass('noscroll')
        } else {
          $('body').removeClass('noscroll')
        }
      }
    },

Upvotes: 0

Orchis
Orchis

Reputation: 533

If you need to do this programmatically rather than simply adding the class to your html markup in code, you can do this with JS from the <script> section of your component.

I would do it like this:

document.documentElement.classList.add('has-navbar-fixed-top')

Here, document.documentElement returns the <html> element, and .classList.add() is used to add a class to it.

Upvotes: 1

Ruben Domingues
Ruben Domingues

Reputation: 26

First of all you shouldn't add any class tag on html tag.

Second, you can and should add that class to body tag on your static index.html file that you probably find on your root folder or in your public folder.

Let me know if works :)

Upvotes: -3

Himanshu
Himanshu

Reputation: 274

body and html tag are inside the index.html file. You can add the class there only.

Upvotes: 1

Related Questions