Necesitas un pase para acceder ⚡

Esta lección está disponible únicamente para usuarios premium.

Regístrate o ingresa a tu cuenta para continuar aprendiendo:

Frontend Aprendiz

CategoryList & type Category

Veamos cómo agregar una lista de Categorías al lado izquierdo de nuestros productos. Para esto nos apoyamos del sistema de grillas, creamos un nuevo componente y una nueva interface.

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code

Git y GitHub

Vite y modo desarrollo

Interface

Union

Union Literals

Function Greeting

Array & Generic

Una Interface no es una Class

Una Class puede implementar una Interface

Visión general

Páginas (rutas)

Introducción a Vuetify

Probar Vuetify rápidamente

Entendiendo proyecto base

Options API y Composition API

Options API: Estado

Template: Eventos

Options API: Métodos

Options API: Hooks

Tarea y nuevo componente

Composition API: Estado

Composition API: Funciones

Composition API: Hooks

Options API vs Composition API

Push changes

Directivas v-if y v-else

Directiva v-for

Componente hijo: ProductCard

Props: De padre a hijo

PropType

Un botón sobre cada card

Events: De hijo a padre

Shorthands

Event naming convention

CartDetail: Comunicación entre hermanos

Aumentar cantidad o agregar detalle

Install & use

Dark & light theme

Grid system

Card: Title & Actions

Props, Slots & Markup

Chip & Spacing

Container

List

Repaso e Introducción

Configuración y Ruta /cart

Organizar components

Vuetify: App Bar & App Main

Custom Router Links

Vuetify: Container

AboutView

Mismo componente distinto estado & Vue Extension

Props y Events no son suficientes

Pinia vs Vuex

Pinia: Preguntas y Respuestas

Store: State, Getters & Actions

Store: Options & Composition API

Define Store: Cart

Computed Properties

Cómo usar nuestro Store

Cleanup y cómo ejecutar Store actions

CategoryList & type Category

Badge: Cantidad de items en el carrito

Nuevo componente para nuestro v-app-bar

Getter: Cart items count

Ocultar badge y asignar color

Detalle: Aumentar y disminuir unidades

Detalle: Eliminar producto

Invocar una acción desde otra

Carrito vacío: Mensaje y RouterLink

Active button e Identificar ruta activa

Vuetify Icons

Button: Size & Icon

ESLint

Refactor: CartDetail & Product

mapActions

mapState

Product image & URL

Local images

Refactor: ShoppingCartItem

Refactor: VList to VTable

Resumen de la compra & Total

Screen readers

Logo: avatar & img

Relación: Product & Category

Category route & Programmatic navigation

Navigation Guards

Products Store

Filtrar por categoría

Función externa

Opción: Todas las categorías

VList: Active Category Item

VList: Subheader

State: Order

100

Order by price & name

101

VList: Active Order Item

102

4 criterios de orden

103

Define Store: Categories

104

Componente: CategoryOptions

105

Intro: Responsabilidades

106

Move data to JSON files

107

Import JSON data

108

Comando npm run build

109

Comando npm run preview

110

Network Waterfall

111

Importancia & Fetch Products

112

Fetch Categories

113

Delay: setTimeout

114

Vuetify Labs: VSkeleton

115

Progreso lineal y circular

116

Pasos siguientes: API & Promises

117

Persistencia de datos & Local Storage

118

VueUse & Persistir nuestro carrito

119

WhatsApp API

120

Enviar orden con detalles del carrito

121

Responsive Grid system

122

Responsive Visibility & Spacing

123

Recapitulación & Despedida

Imagen de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript

Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript

Necesitas un pase para acceder ⚡

CategoryList & type Category

Antes que te vayas