Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Install & use
Veamos cómo instalar Vuetify sobre nuestro proyecto, y cómo empezar a usarlo.
Avance en nuestra tienda online
De momento, tenemos esto y es funcional.
El avance que hemos hecho es muy bueno para nuestra tienda online.
Funcionalmente, nuestro proyecto ya tiene un gran avance, porque tenemos productos y también tenemos botones para agregar productos al carrito.
Sin embargo, visualmente todavía no tenemos mucho progreso.
Podemos escribir nuestros propios estilos y diseñar nuestra tienda online.
Uso de Vuetify
Como hemos comentado en un inicio, vamos a ahorrar un poco de tiempo usando Vuetify.
Dado que Vuetify es un framework de componentes para Vue, vamos a aprovechar los componentes que Vuetify 3 nos ofrece.
¿Cómo podemos instalar Vuetify?
Hay varias formas de instalar Vuetify.
Una forma es creando un proyecto nuevo de Vuetify.
Sin embargo, en nuestro caso, ya contamos con un proyecto y no queremos crearlo desde cero.
Lo que queremos es simplemente agregar Vuetify como dependencia de nuestro proyecto.
Para ello, en una terminal nueva ejecutamos el siguiente comando:
npm install vuetify
Si lo deseamos, también podemos especificar la versión que nos interesa. Usando @, podemos indicar la versión.
Esto iniciará la descarga de Vuetify.
Verificación en package.json
Luego de esto, si revisamos nuestro archivo package.json, en la sección de dependencias veremos que se ha agregado Vuetify.
Gracias a este framework, podremos reutilizar componentes de Vue que ya cuentan con un diseño determinado.
Uso de v-card
Para comenzar a usar Vuetify, aprovecharemos un componente llamado v-card.
Podemos usarlo de la siguiente manera:
<v-card>Texto de ejemplo</v-card>
Vamos a poner cada producto dentro de un v-card.
Para ello, abrimos nuestro componente llamado ProductCart.
Como no vamos a cambiar la funcionalidad, no tocaremos la sección de script, sino que nos enfocaremos en la sección de template.
Por ahora, colocamos un texto de ejemplo y guardamos.
Error al no declarar Vuetify
Al actualizar, no hay ningún cambio.
Esto ocurre porque estamos usando una etiqueta, pero nunca hemos declarado Vuetify.
Aunque Vuetify ya está descargado en node_modules, aún no hemos declarado su existencia y, por lo tanto, no podemos usar sus componentes.
Si presionamos F12, veremos este warning:
No se ha podido resolver el componente v-card
Nosotros instalamos Vuetify a través de npm, pero también se puede instalar con yarn u otro gestor de paquetes.
Sin embargo, luego de instalarlo, es importante empezar a usarlo.
Importar Vuetify en Vue
Para comenzar a usarlo, debemos importar Vuetify en nuestro proyecto.
Copiamos las siguientes líneas y las agregamos a nuestro archivo main.js:
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
De esta manera, creamos una instancia de Vuetify, pero aún no está en uso.
Para que Vue lo utilice, debemos llamarlo en nuestra aplicación:
const vuetify = createVuetify({
components,
directives,
});
createApp(App).use(vuetify).mount('#app');
Aquí:
-
createAppes una función de Vue. -
createVuetifyes una función de Vuetify.
Con estas líneas, nuestra instancia de Vue usará nuestra instancia de Vuetify.
Resultado en el navegador
Guardamos los cambios y, si vamos al navegador, veremos que los mensajes de warning han desaparecido y ya tenemos un v-card con el texto de ejemplo.
Agregar contenido dentro de v-card
En vez de pasar el texto como un prop, podemos colocar el contenido dentro del v-card:
<v-card>
<p>Contenido del producto</p>
</v-card>
Guardamos y este es el resultado.
Los cards están muy pegados entre sí, por lo que debemos ir ajustándolos.
Registro global de componentes en Vuetify
Tal vez te preguntes cómo es posible que podamos usar v-card sin haber declarado una sección de components.
La razón es que no es necesario declarar v-card localmente, porque ya se encuentra registrado globalmente en nuestra instancia de Vue.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
De momento tenemos esto y es funcional. El avance que hemos hecho es muy bueno, para nuestra tienda online. Funcionalmente nuestro proyecto ya tiene un gran avance, porque tenemos productos y también tenemos botones para agregar productos al carrito. Sin embargo visualmente todavía no tenemos mucho progreso. Podemos escribir nuestros propios estilos y diseñar nuestra tienda online. Sin embargo como hemos comentado en un inicio nosotros vamos a ahorrar un poco de tiempo usando Vuetify. Dado que Vuetify es un framework de componentes para Vue, nosotros vamos a aprovechar los componentes que Vuetify 3 nos ofrece. ¿Cómo podemos instalar Vuetify? Hay varias formas de instalar Vuetify. Una forma es creando un proyecto de Vuetify nuevo, de esta manera. En nuestro caso no queremos crear un proyecto nuevo porque ya contamos con uno. Lo que queremos más bien es simplemente agregar Vuetify como dependencia de nuestro proyecto. Por eso lo que vamos a hacer es, en una terminal nueva ejecutar el comando "npm install vuetify". Si lo deseamos también podemos especificar la versión que nos interesa. Usando esta arroba podemos indicar la versión que nos interesa. Esto iniciará la descarga de Vuetify. Muy bien. Luego de esto, si nos vamos a nuestro "package.json" vamos a ver en nuestra sección de dependencias, que se ha agregado una nueva dependencia. Que en este caso es Vuetify. Gracias a este framework nosotros vamos a poder reutilizar componentes de Vue que ya cuentan con un diseño determinado. ¿Cómo podemos empezar a usar Vuetify? Bueno, como hemos comentado antes tenemos un componente llamado card. Aprovechemos este componente y usémoslo. La etiqueta de este componente es vue guión card. Entonces podemos usarlo de esta manera. Vamos a poner cada producto dentro de un card. Para ello vamos a abrir nuestro componente llamado ProductCart. Como no vamos a cambiar la funcionalidad, no vamos a tocar la sección de script. No vamos a enfocar en la sección de template. Y por ahora vamos a poner aquí un texto de ejemplo. Guardamos. Y al actualizar, no hay ningún cambio. Esto ocurre debido a que estamos usando una etiqueta, pero nunca hemos declarado Vuetify. A pesar que Vuetify ya está descargado dentro de node modules, no hemos declarado su existencia y por lo tanto no podemos todavía usar esta expresión. Inclusive si presionamos F12, vamos a ver este warning, que nos dice "no se ha podido resolver el componente v-card". Nosotros hemos instalado Vuetify a través de npm. También se puede instalar a través de yarn o cualquier otro gestor de paquetes. Pero luego de instalar es importante empezar a usarlo. Para empezar a usarlo tenemos que importar Vuetify. Para ello podemos copiar estas líneas. Vamos a agregar estas líneas sobre nuestro archivo main. Allí está. Estamos importando Vuetify styles, la función create Vuetify, y estamos importando componentes y directivas, ¿sí? De esta manera Vuetify se crea, se crea una instancia de Vuetify, pero todavía no está en uso. Para que esté en uso, sobre nuestra aplicación de Vue tenemos que llamar a use Vuetify, ¿sí? Entonces aquí tenemos nuestra aplicación de Vue, y aquí vamos a indicarle a nuestra aplicación que queremos usar Vuetify. Aquí creamos una instancia de Vuetify, y con esta línea declaramos y que queremos usar este framework. Este create app como estamos viendo es una función de Vue, mientras que este create Vuetify es una función de Vuetify. Y de esta manera podemos hacer que nuestra instancia de Vue use nuestra instancia de Vuetify. Hasta aquí guardamos. Y si venimos a nuestro navegador, veremos que los mensajes de warning han desaparecido y ya tenemos un card, ¿sí?, con el texto de ejemplo. En vez de pasar el texto como un prop a este componente nosotros vamos a poner nuestro contenido dentro del card. ¿Sí?, dentro del card, de esta manera. Guardamos. Y este es el resultado. Tenemos cards, solo que los cards se encuentran muy pegados, por eso se ve de esta manera. Vamos a ir adaptando nuestros cards. Por ahora lo importante es que puedas agregar Vuetify a tu proyecto y que puedas empezar a usarlo, ¿sí? Tal vez te preguntes, ¿cómo es posible que podemos usar aquí Vue Card si no hemos declarado una sección de components? No es necesario declarar v-card localmente porque ya se encuentra registrado globalmente, ¿sí? Se encuentra registrado globalmente sobre nuestra instancia de Vue de manera general
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript