Estoy trabajando en un andamio simple para vite, vue y vuetify con mecanografiado y quería usar la versión de configuración de script de SFC vue
<script setup lang="ts">Una cosa que no puedo entender es cómo acceder a las propiedades de "esta" palabra clave.
por ejemplo, en mis viejos proyectos de vue podría escribir esto
this.$vuetify.themes.light.colors.primaryasí que tuve la capacidad de acceder a $vuetify en cualquier parte del componente, pero ahora en el modo de configuración de secuencias de comandos "esta" palabra clave no está definida; ¿Cómo acceder a "estas" propiedades?
La palabra clave de setup en la etiqueta del script es un azúcar de sintaxis para:
const myComponent = createComponent({ setup() { const foo = "may-the-force"; let bar = "be-with-you"; return { foo, bar } } }) Entonces, naturalmente, en una función de setup , no necesitará this palabra clave porque ahora solo puede hacer:
bar = "be-not-with-you"; return { foo, bar }Ahora, cuando inició su marco Vuetify, una instancia se mantendrá en algún lugar. Algo como esto:
import Vue from "vue"; import { createVuetify } from 'vuetify' Vue.use(Vuetify); export const vuetify = createVuetify({ theme: {} }); Ahora que ha almacenado su instancia vuetify en algún lugar, puede importarla como lo haría con cualquier otro archivo javascript/typescript:
<script setup lang="ts"> import { vuetify } from "path/to/vuetify/instance"; console.log(vuetify.themes.light.colors.primary); // You can even set dark mode if you prefer to vuetify.framework.theme.dark = true; </script> Supongo que las cosas son un poco diferentes en Vue 3. Después de investigar un poco, puede obtener la instancia actual de Vue usando getCurrentInstance
<script setup> import { getCurrentInstance } from 'vue' const app = getCurrentInstance() // it should be here in this instance the vuetify object with its properties console.log(app); </script>