Vuetify when drawer is opened, background opacity doesn't change

Question

I have a component called AppHeader.vue Whhen I click on nav bar icon, the drawer opens but the background opacity doesn't darken a bit like it should. Maybe placing this drawer inside of AppHeader causes this problem?

Here's the code

<template>
  <v-app>
    <v-app-bar app color="white-lighten-1" dark clipped-left>
      <v-toolbar-title>Text</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn outlined v-if="showButtons">I'm Worker</v-btn>
      <v-btn outlined v-if="showButtons">I'm Requester</v-btn>
      <v-app-bar-nav-icon v-if="showIcon" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
    </v-app-bar>

    <v-navigation-drawer v-model="drawer" location="right" app temporary>
      <v-divider></v-divider>
      <v-list dense nav>
        <v-list-item v-for="item in items" :key="item.title" :value="item" link>
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      showButtons: true, // Initially, show the buttons
      showIcon: false,   // Initially, hide the icon button
      drawer: false,
      items: [
        { title: "I'M WORKER", icon: 'mdi-view-dashboard' },
        { title: "I'M REQUESTER", icon: 'mdi-account-box' },
      ],
    };
  },
  mounted() {
    // Add an event listener to detect screen width changes
    window.addEventListener('resize', this.handleResize);
    // Initialize showButtons and showIcon based on initial screen width
    this.handleResize();
  },
  beforeUnmount() {
    // Remove the event listener when the component is unmounted
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // Get the current screen width
      const screenWidth = window.innerWidth;
      // Update showButtons and showIcon based on the screen width
      this.showButtons = screenWidth > 540;
      this.showIcon = screenWidth <= 540;
    },
  },
};
</script> 

Answer 1

It needed to be wrapped in < v-app > app.vue, I had multiple declared in each component