How to use Vuetify 2 breakpoints with script setup syntax?-CodePudding

I do get the current instance of Vue and I do get the $vuetify object from it with all the breakpoints as well as other properties.

My issue is that the breakpoints properties do not update after changing the screen size. It's not reactive.

I have tried using computed for it and indeed it doesn't change:

import { getCurrentInstance } from 'vue'

const vuetify = computed(() => (getCurrentInstance()?.proxy as any).$vuetify);

How can I use $vuetify.breakpoints and have it change based on screen size – just like in Vue 3 options syntax: this.$vuetify.breakpoints – I am upgrading from Vue 2 to 3 with script setup syntax (Composition API).

Thank you.

CodePudding user response：

You can make useVuetify composable like this:

 // @composables/useVuetify
 import { getCurrentInstance } from 'vue';

  export const useVuetify = () => {
   const vm = getCurrentInstance();
   return vm.proxy?.$vuetify || undefined;
 }

Then use it like so:

 // Your component
 const vuetify = useVuetify();
 const currentBreakpointName = computed(() => vuetify.breakpoint.name);

In script you would need to use it with .value: currentBreakpointName.value

In template you do not need .value: v-if="currentBreakpointName === 'xl'" or :value="currentBreakpointName" or simple {{ currentBreakpointName }}