[Vuejs]-How do I specify different background colours for different pages in Gridsome/vue.js?

1👍

html and body are outside the application bounds. You will want to programatically control these elements.

Two simple avenues come to mind:

  1. Use the layouts approach which will work with or without scoped CSS.
  2. Manipulate the body classList using navigation guards.
👤Cue

0👍

you can pass props to layouts.
For example pass a prop like

<template>
  <Layout :background="white">
    <section>Add page content here</section>
  </Layout>
</template>

then write your css like

[background=white] section {
    background: #fff !important;
}

Leave a comment