Vuetify 3 v-navigation-drawer not closing when clicked outside

Question

I'm trying to close navigation drawer after it's been opened by clicking outside, but that doesn't work for some reason. If I click outside v-navigation-drawer nothing happens - no errors, no warns, just nothing

My dependencies in package.json:

"dependencies": {
    "@mdi/font": "5.9.55",
    "axios": "^0.27.2",
    "date-fns": "^2.28.0",
    "pinia": "^2.0.14",
    "ramda": "^0.28.0",
    "roboto-fontface": "*",
    "vue": "^3.2.37",
    "vue-router": "^4.0.16",
    "vuetify": "^3.0.0-beta.4",
    "webfontloader": "^1.0.0"
  },

My files: Header.vue

<script setup lang="ts">
import { useAdminSharedStore } from "@/stores/admin/admin-shared-store";

const adminSharedState = useAdminSharedStore();
</script>

<template>
  <v-app-bar prominent color="background" elevation="0">
    <div class="boxed-container w-100">
      <div class="d-flex align-center mx-6">
        <v-app-bar-nav-icon class="d-lg-none" variant="text" @click="adminSharedState.toggleDrawer" />
      </div>
    </div>
  </v-app-bar>
</template>

SideBar.vue:

<script setup lang="ts">
import routeNames from "@/router/route-names";
import { useAdminSharedStore } from "@/stores/admin/admin-shared-store";
import logo from "@/assets/admin/Logo.svg";

const adminSharedState = useAdminSharedStore();
</script>

<template>
    <v-navigation-drawer width="260" color="background" border="0" :model-value="adminSharedState.isOpenDrawer" temporary>
    <div class="ps-6 pe-5 pt-5 pb-2">
      <router-link class="d-flex align-center text-decoration-none home-link" :to="{ name: routeNames.owner }">
        <img :src="logo" alt="logo" width="30" height="24" />
        <p class="text-uppercase title ml-3">Meet scapes</p>
      </router-link>
    </div>
    <v-list class="pr-5 v-sheet" bg-color="background"> </v-list>
  </v-navigation-drawer>
</template>

In SideBar component I also tried v-model and :value instead of :model-value, but for :value that doesn't open drawer at all, and for v-model I had error:

And I use pinia (state management) to define is drawer open: store.ts:

import { defineStore } from "pinia";

export const useAdminSharedStore = defineStore({
  id: "admin-shared-store",
  state: () => ({
    _isOpenDrawer: false,
  }),
  getters: {
    isOpenDrawer: (state) => state._isOpenDrawer,
  },
  actions: {
    toggleDrawer() {
      this._isOpenDrawer = !this._isOpenDrawer;
    },
  },
});

Vuetify 3 v-navigation-drawer not closing when clicked outside

0 Answers0