Skip to content
Alebat

Guía de Vuetify para Vue y Nuxt

Introducción

Vuetify es un framework de interfaz de usuario para Vue.js que proporciona una amplia gama de componentes y herramientas para construir interfaces de usuario ricas y responsivas.

Enlaces Oficiales

Estilos

Los estilos se pueden administrar utilizando Tailwind CSS o estilos personalizados.

Configuración en Vue

Paso 1: Instalación

Instala Vuetify en tu proyecto Vue:

Terminal window
npm install vuetify

Paso 2: Configuración en main.js

import { createApp } from "vue";
import App from "./App.vue";
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { createPinia } from "pinia";
import router from "./router";
import Vue3Lottie from "vue3-lottie";


const pinia = createPinia();
const vuetify = createVuetify({
  components,
  directives,
});


createApp(App)
  .use(pinia)
  .use(vuetify)
  .use(router)
  .use(Vue3Lottie)
  .mount("#app");

Configuración en Nuxt

Paso 1: Crear Carpeta y Archivo de Plugin

  1. Crea una carpeta plugins en tu proyecto Nuxt.
  2. Dentro de esta carpeta, crea un archivo llamado Vuetify.client.ts.

Paso 2: Configuración en Vuetify.client.ts

  • Agrega la siguiente configuración en Vuetify.client.ts:
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";


export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
  });


  nuxtApp.vueApp.use(vuetify);
});
  • Con estos pasos, tienes Vuetify configurado correctamente en tu proyecto Vue o Nuxt

Uso de Vuetify en Proyectos Vue y Nuxt

1. Introducción

La sintaxis <script setup> es una adición en Vue 3 que permite una forma más declarativa y concisa de escribir componentes. Al combinarla con Vuetify, puedes crear interfaces de usuario elegantes con menos código.

2. Importación y Uso de Componentes Vuetify

Importación de Componentes

Con <script setup>, puedes importar componentes de Vuetify directamente en tu script. Por ejemplo, para usar un botón de Vuetify:

<template>
  <v-btn color="primary">Click me</v-btn>
</template>


<script setup>
import { VBtn } from 'vuetify/components'
</script>

3. Uso del Sistema de Grid de Vuetify

  • Vuetify ofrece un sistema de grid basado en Flexbox. Con <script setup>, puedes usarlo de la siguiente manera:
<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="6">
        <!-- Contenido de la columna -->
      </v-col>
      <v-col cols="12" md="6">
        <!-- Contenido de la columna -->
      </v-col>
    </v-row>
  </v-container>
</template>


<script setup>
import { VContainer, VRow, VCol } from 'vuetify/components'
</script>

4. Utilización de Directivas

  • Las directivas de Vuetify, como v-model, también se pueden usar con <script setup>. Por ejemplo, para un campo de texto con Vuetify:
<template>
  <v-text-field v-model="text" label="Escribe algo"></v-text-field>
</template>


<script setup>
import { ref } from 'vue'
import { VTextField } from 'vuetify/components'


const text = ref('')
</script>

5. Uso en Nuxt con Vuetify

  • En un proyecto Nuxt con Vuetify, el uso de componentes y directivas es similar. Asegúrate de haber configurado Vuetify correctamente en tu proyecto Nuxt como se describe en la sección anterior.

  • Si quieres información adicional, utiliza la documentación oficial de Vuetify: Documentación Vuetify