CODEWITHSUNDEEP
vuejs2vuetify.jsvue-composition-api
starleaf1
starleaf1

Reputation: 2872

How do I access this.$vuetify using Composition API in Vue 2?

I'm trying to read and change the value of this.$vuetify.dark using composition API in Vue 2 + Vuetify 2. Now that this.myGlobalOption is no longer accessible in composition API, how do I do this? I'm gonna need to do this both from within the template and from outside.

Upvotes: 2

Views: 1707

Answers (2)

Zymotik
Zymotik

Reputation: 7357

This is the modern approach with Vue 3 and Veutify useTheme:

<template>
  <template v-if="theme.dark">This is a dark theme</template>
  <template v-if="!theme.dark">This is a light theme</template>
</template>

<script lang="ts" setup>
import { defineComponent } from "vue";
import { useTheme } from "vuetify";

defineComponent({
  name: "DisplayThemeMode"
});

const { current: theme } = useTheme();
</script>

I actually came here because I was looking for the alternative to:

const isMobile = this.$vuetify.display.smAndDown;

The good fellows at Veutify have already got you covered with Display and Platform:

import { useDisplay } from 'vuetify';

const { smAndDown: isMobile } = useDisplay();

// or even, more simply using their definition of mobile:
const { mobile } = useDisplay();

Upvotes: 1

Russ Deneychuk
Russ Deneychuk

Reputation: 815

You can make a helper function(composable?) like this:

import { getCurrentInstance } from 'vue';

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

Then in your component you can get access to vuetify instance via:

  const vuetify = useVuetify();

Upvotes: 7

Related Questions