title: Vue : how to change background color for each page
body: <p>i have code below in Vue js below and i wanted to have different background color in each page, but whenever i do that i should go to App.vue and change color from their for all pages cuz the main container here that includes all pages is App , is there a way to change background color for only one page ? thanks in advance</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
  &lt;b-container&gt;
  &lt;h1&gt; Ask Question &lt;/h1&gt;
  &lt;br&gt;
   &lt;br /&gt;
  &lt;b-row align-v="center"&gt;
  &lt;b-col cols="8"&gt;
  
      &lt;b-form-group
  
    
   @submit="postData" method="post"&gt;
        &lt;b-form-input
          type="text"
          name="title"
          v-model="posts.title"
          placeholder="Title"
          required
       
        &lt;b-form-input id="question-input"
          type="text"
          name="question"
          v-model="posts.question"
          placeholder="Question"
          required
        /&gt;&lt;br /&gt;&lt;br /&gt;
      
        &lt;b-button class="primary" type="submit"&gt;Post&lt;/b-button&gt;
      &lt;/b-form-group
  &gt;
    
  &lt;/b-col&gt;
  
  &lt;/b-row&gt;
  
  
  
   &lt;/b-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: "postComponent",
    data() {
      return {
        posts: {
          title: null,
          question: null,
        },
      };
    },
    methods: {
      postData(e) {
          this.axios.post("",this.posts).then(( result) =&gt; {
  console.log(result)
          })
          // console.warn(this.posts)
        e.preventDefault();
      },
    },
  };
  &lt;/script&gt;
  &lt;style scoped&gt;
  @import url('https://fonts.googleapis.com/css2?family=Cairo&amp;displa');
  .container{
      padding:50px;
      font-family: 'Cairo', sans-serif;
  }
  #question-input{
      padding: 35px 10px 90px;
  }
  
  
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>App.vue</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
  
  
  &lt;div class="app"&gt;
  &lt;Header /&gt;
  &lt;router-view /&gt;
  &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  import Header from './components/Header';
  
  export default {
    name: 'App',
  
    components: {
      Header,
    },
  
    data: () =&gt; ({
      //
    }),
  };
  
  &lt;/script&gt;
  &lt;style&gt;
  .app{
    width: auto;
  
  }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>