Customize the background color in VueJS based on user roles

Question

Customize the background color in VueJS based on user roles

I am currently working on a vuejs project with different user levels.

In the "user" level (and public area), there is a background image, while in the "admin" level, a plain white background is displayed.

I have read that using style tags in the template without the scoped keyword can affect everything. I tried this approach but it did not yield the desired results.

After experimenting by placing the styles in the parent div, everything worked almost perfectly. However, on the logged out page, the image does not cover the entire page, leaving a large white space.

Previously, I had applied the CSS directly to the body within the header component. The snippet of CSS code below shows my attempt at applying it to the parent div:

.backgroundCompany{
  background-color: white;
}

.backgroundUser{
  background: url('/img/bg_img.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    min-height: 100%;
}

During my troubleshooting process, I referred to Stackoverflow posts #49516424 and #48172814 for insights.

UPDATED: I have included a partial screenshot of the issues faced when the styles are applied in App.vue as the style for div id=app. While the admin section displays the pure white background correctly, the user section does not cover the entire body. https://i.sstatic.net/UhkEV.png

javascript vue.js

Answer 1

Answer №1

If you want to update the background image of a component, you can easily do so within the template of that component. By utilizing the class property and dynamically changing the class based on the userType (which may come from props or other sources like computed properties, stores, or HTTP calls), you can achieve this functionality.

<template>
  <div :class="userType === 'user' ? 'backgroundUser' : 'backgroundCompany'">
    .....
  </div>
</template>
export default {
  props: {
    userType: {
      type: String,
      required: true
    }
  }
}
<style scoped>
  .backgroundCompany{
  background-color: white;
}

.backgroundUser{
  background: url('/img/bg_img.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    min-height: 100%;
}
</style>

Answer 2

If you want to update the background image of a component, you can easily do so within the template of that component. By utilizing the class property and dynamically changing the class based on the userType (which may come from props or other sources like computed properties, stores, or HTTP calls), you can achieve this functionality.

<template>
  <div :class="userType === 'user' ? 'backgroundUser' : 'backgroundCompany'">
    .....
  </div>
</template>
export default {
  props: {
    userType: {
      type: String,
      required: true
    }
  }
}
<style scoped>
  .backgroundCompany{
  background-color: white;
}

.backgroundUser{
  background: url('/img/bg_img.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    min-height: 100%;
}
</style>

Answer 3

Answer №2

If you're facing an issue with re-rendering the component correctly when a user is changed, one way to tackle this is by adding styles within a tag in your Vue template and using :key for re-rendering purposes. Here's an example of how you can implement this:

  <template>
     <div :style="styleObject" :key="uniqKey">
            // your code
     </div>
   </template>

    <script>
        export default {
          data() {
             return {
               styleObject: {
                 backgroundImage: `url(${require('@/assets/path/to/your/img.jpg')})`   
              },
            uniqKey:0 // modify this value for re-render
          },
          methods: {
            forceRerender() {
              this.styleObject.backgroundImage = '' // new image 
              this.uniqKey+= 1;  
            }
          }
    }       
    </script>

To learn more about this technique, you can visit this resource.

Answer 4

If you're facing an issue with re-rendering the component correctly when a user is changed, one way to tackle this is by adding styles within a tag in your Vue template and using :key for re-rendering purposes. Here's an example of how you can implement this:

  <template>
     <div :style="styleObject" :key="uniqKey">
            // your code
     </div>
   </template>

    <script>
        export default {
          data() {
             return {
               styleObject: {
                 backgroundImage: `url(${require('@/assets/path/to/your/img.jpg')})`   
              },
            uniqKey:0 // modify this value for re-render
          },
          methods: {
            forceRerender() {
              this.styleObject.backgroundImage = '' // new image 
              this.uniqKey+= 1;  
            }
          }
    }       
    </script>

To learn more about this technique, you can visit this resource.

Customize the background color in VueJS based on user roles

Answer №1

Answer №2

Similar questions

Tips for implementing the JSON object table filter functionality

Retrieve information from a MySQL database and integrate it into a different application

Next.JS - What is the reason behind data fetching occurring on both the server and client side?

Use JavaScript and AJAX to easily assign multiple variables with unique IDs to an array with just one click

AngularJS Alert Timer Setting

Using JavaScript to call an API in PHP and determine how to handle a response that is not equal to 200 by printing an

The DOM is failing to refresh in Vue.js even after the array has been updated

I possess 9 captivating visuals that gracefully unveil their larger counterparts upon being clicked. Curiously, this enchanting feature seems to encounter a perplexing issue within the realm of web browsing

What are some ways I can make my content come alive on my website using the Tympanus examples

Obtain the text from an altered stylesheet in Firefox

How to utilize a parent variable in Vue.js?

Scrolling will only function properly on this page if you refresh it

Tips for using a JavaScript function to navigate to a specific division (<div>) on an HTML page

Facing issues using Angular 5 for PUT requests due to 401 errors

Creating an interactive Table of Contents in Sharepoint using only JavaScript

Unsuccessful execution of JavaScript in returned HTML after being appended with jQuery .load() or .ajax()

Guidance on creating a custom color selection tool for a specific task

Tips on transforming a JavaScript function constructor into TypeScript

Working with ReactJS, Material-UI, and Javascript: Facing challenges in applying rounded borders to TableRow components

typescript: Imported modules in typescript are not functioning