Changing body styles in vue router

Asked 14/6, 2017 at 10:17 Answered 29/11, 2021 at 3:31

Solved javascript vue.js vue-router vue-loader

I'm using Vue router with two pages:

let routes = [
    {
        path: '/',
        component: require('./components/HomeView.vue')
    },
    {
        path: '/intro',
        component: require('./components/IntroView.vue')
    }
]

This works fine, except that each of my components has different body styling:

HomeView.vue:

<template>
    <p>This is the home page!</p>
</template>

<script>
    export default {

    }
</script>

<style>
    body {
        background: red;
    }
</style>

IntroView.vue:

<template>
    <div>
        <h1>Introduction</h1>
    </div>
</template>

<script>
    export default {

    }
</script>

<style>
    body {
        background: pink;
    }
</style>

My goal is to have these two pages have different background styles (eventually with a transition between them). But at the moment when I go to the home route (with the red background), then click the intro route, the background colour stays red (I want it to change to pink).

Edit: index.html:

  <body>
    <div id="app">
        <router-link to="/" exact>Home</router-link>
        <router-link to="/intro">Introduction</router-link>
        <router-view></router-view>
    </div>
    <script src="/dist/build.js"></script>
  </body>

Integrator answered 14/6, 2017 at 10:17 Comment(7)

You could use the $router object in order to add a class to your body and style it in a global sheet ? – Blythebm 14/6, 2017 at 10:23

all the styles will be available globally. so you solution is the one above – Blowfly 14/6, 2017 at 10:26

Edited my question to include my index.html. I can't see how I could add a class to body when it's outside of the app. – Integrator 14/6, 2017 at 10:29

I tested your code and this is working fine...You have no errors ? Is the pink background applied but maybe override by red ? (this has no reason to happens tho) – Blythebm 14/6, 2017 at 10:33

Evan You suggestion in order to change body class : The easy way is just setting document.body.className in a global beforeEach hook. This solution is two years old but can still be used I guess From : forum-archive.vuejs.org/topic/656/… – Blythebm 14/6, 2017 at 10:35

@Blythebm It works until you click back to the first page. E.g. go to home page (red bg), click intro page (it changes to pink), go back to home page (it stays pink, should change back to red). – Integrator 14/6, 2017 at 10:39

I think the /intro style is still there and erase the / style. Could you confirm ? If so, you should use the body class way (moreover it will be easier to manage, especially if you want to use transitions) – Blythebm 14/6, 2017 at 10:44

I got it working with the lifecycle hook beforeCreate and a global stylesheet. In global.css:

body.home {
    background: red;
}
body.intro {
    background: pink;
}

In the <script> section of HomeView.vue:

export default {
    beforeCreate: function() {
        document.body.className = 'home';
    }
}

And similar in IntroView.vue.

Integrator answered 14/6, 2017 at 12:17 Comment(3)

once added class to body, may be in another view this needs to be removed, should we use destroyed lifecycle hook? – Vollmer 6/8, 2018 at 10:55

you save my time! – Nonconductor 24/8, 2020 at 23:17

better use nextTick – Despotism 15/10, 2022 at 5:57

watch: {
  $route: {
    handler (to, from) {
      const body = document.getElementsByTagName('body')[0];
      if (from !== undefined) {
        body.classList.remove('page--' + from.name.toLowerCase());
      }
      body.classList.add('page--' + to.name.toLowerCase());
    },
    immediate: true,
  }
},

Another fairly simple solution, add it to your base App.vue file. The to.name can be replaced with to.meta.class or similar for something more specific. This is a nice do it once and it works forever type solution though.

Empower answered 28/11, 2018 at 23:4 Comment(3)

This is a great solution, and seems to append the class name faster than the accepted solution. The only downside is it only loads the class name when actually navigating via routes, i.e. not on initial page load (so if you refresh a single page or directly access a certain page, the class name is not appended.) Not sure if there's a way to modify it to account for this issue aside from combining it w/ the approach detailed in the selected answer? – Ethelynethene 18/4, 2019 at 4:26

Added the immediate flag to the watcher, but in that case there will be no 'from' route defined, so removal of the class can be skipped. – Empower 19/4, 2019 at 23:47

Nice (better) answer. By the way, you can use document.body to get the body element. It's been available forever (since IE4/1997). – Maggi 18/9, 2020 at 18:15

If the class is view specific, may be this will help

methods: {
  toggleBodyClass(addRemoveClass, className) {
    const el = document.body;

    if (addRemoveClass === 'addClass') {
      el.classList.add(className);
    } else {
      el.classList.remove(className);
    }
  },
},
mounted() {
  this.toggleBodyClass('addClass', 'mb-0');
},
destroyed() {
  this.toggleBodyClass('removeClass', 'mb-0');
},

Move the methods section to a mixin and then the code can be DRY.

Vollmer answered 6/8, 2018 at 11:0 Comment(0)

Alternatively you can use this

It allows to control your page body classes with vue-router. Wrote this when faced the similar issue. It also refers to Add a class to body when component is clicked?

Inimitable answered 3/11, 2017 at 14:14 Comment(0)

I ran into an issue when I wanted to modify the styles of the html and body tags along with the #app container on specific routes and what I found out is that for various reasons, this can be quite complicated.

After reading through:

@Saurabh's answer on another relative question: https://mcmap.net/q/505185/-dynamically-inserting-a-css-class-to-navbar-based-on-route
@Mteuahasan's comment above regarding Evan You's suggestion
@GluePear's / OP's answer to this question: https://mcmap.net/q/495989/-changing-body-styles-in-vue-router
Sass style inclusion headaches: https://github.com/vuejs/vue-loader/issues/110#issuecomment-167376086

In your App.vue (could be considered as the centralised state):

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'my-app',
    methods: {
      handleStyles () {
        // Red style to the body tag for the home page
        if (['/'].includes(this.$route.path)) document.body.className = 'bg-red'
        // Pink style to the body tag for all other pages
        else if (document.body.classList.contains('bg-red')) document.body.className = 'bg-pink'
      }
    },
    // Handle styles when the app is initially loaded
    mounted () {
      this.handleStyles()
    },
    // Handle styles when the route changes
    watch: {
      '$route' () {
        this.handleStyles()
      }
    }
  }
</script>

<style>
  .bg-red {
    background: red;
  }
  .bg-pink {
    background: pink;
  }
</style>

So for the route / you get the red style and for all other routes the pink style is applied.

The handleStyles logic could have been dealt with by the beforeCreated hook however in my case, this would only affect the html and body styles but the #app element where the router view is rendered into would only available when the dom has been mounted so I think that it is a slightly more extensible solution.

Cayser answered 20/11, 2018 at 20:42 Comment(0)

Top answer is right, but need some optimization.
Because that answer doesn't work when one refreshes that page. Reason is that dom is not loaded done when set the style you want. So, better solution is this:

beforeCreate() {
  this.$nextTick(() => {
    document.querySelector('body').style.backgroundColor = '#f2f2f2'
  })
},
beforeDestroy() {
  document.querySelector('body').style.backgroundColor = ''
},

By wrapping style setting handler in this.$nextTick, the style will be set when dom is loaded. So you can get correct styles when refresh page

Despotism answered 29/11, 2021 at 3:31 Comment(0)

You can also do it directly in the router file using the afterEach hook:

mainRouter.afterEach((to) => {
    if (["dialogs", "snippets"].includes(to.name)) {
        document.body.style.backgroundColor = "#F7F7F7";
        // or document.body.classList.add(className);
    } else {
        document.body.style.backgroundColor = "#FFFFFF";
        // or document.body.classList.remove(className);
    }
});

afterEach hook documentation

to is a route object which contains the route name (if named), path, etc. Documentation for all the props

Insuperable answered 30/4, 2019 at 13:39 Comment(0)

-2

You can use scoped attribute in the style element. Then the style will be limited only to that vue file.

HomeView.vue:

<template>
    <p>This is the home page!</p>
</template>

<script>
    export default {

    }
</script>

<style scoped>
    body {
        background: red;
    }
</style>

IntroView.vue:

<template>
    <div>
        <h1>Introduction</h1>
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>
    body {
        background: pink;
    }
</style>

Audile answered 17/5, 2019 at 18:9 Comment(1)

Unfortunately, scoped does not apply to DOM elements outside the component, like body, html, etc – Understandable 1/11, 2021 at 14:23

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags