The setup keyword in the script tag is a convenient shorthand for:
const myComponent = createComponent({
setup() {
const foo = "may-the-force";
let bar = "be-with-you";
return {
foo,
bar
}
}
})
In a setup function, you no longer need to use the this keyword, as shown below:
bar = "be-not-with-you";
return {
foo,
bar
}
Once your Vuetify framework is initialized, an instance will be stored somewhere, similar to this:
import Vue from "vue";
import { createVuetify } from 'vuetify'
Vue.use(Vuetify);
export const vuetify = createVuetify({ theme: {} });
With your vuetify instance saved, you can import it like any other javascript or typescript file:
<script setup lang="ts">
import { vuetify } from "path/to/vuetify/instance";
console.log(vuetify.themes.light.colors.primary);
// You can even enable dark mode if desired
vuetify.framework.theme.dark = true;
</script>
Edit
In Vue 3, accessing the current Vue instance differs slightly. You can achieve this by using getCurrentInstance
<script setup>
import { getCurrentInstance } from 'vue'
const app = getCurrentInstance()
// Within this instance should be the vuetify object with its properties
console.log(app);
</script>