Estilos en Vue: Scoped, Clases Dinámicas y Uso de Sass

Contenido del curso

Conceptos básicos de Vue

Reactividad en Vue

Composición en Vue

Manejo de eventos e inputs

Optimización en Vue

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:22

Estilos en Vue: Scoped, Clases Dinámicas y Uso de Sass

Curso de Vue.js

Clase 5 de 34

Clase 5 / 34

Recursos

¿Cómo agregar estilos en una aplicación Vue?

La personalización visual de una aplicación web es fundamental para ofrecer una experiencia de usuario atractiva y consistente. En Vue, puedes aplicar estilos utilizando CSS de diversas maneras, incluyendo el uso de preprocesadores o bibliotecas de terceros como Tailwind. Exploremos cómo puedes estilizar tus componentes Vue de manera efectiva.

¿Cómo escribir estilos CSS en Vue?

Dentro de una componente Vue, es posible escribir estilos CSS de manera convencional. Solo necesitas incluir tus reglas dentro de una etiqueta <style>. Sin embargo, Vue te ofrece la capacidad de aislar estos estilos para que no afecten otros componentes de tu aplicación.

Aislar estilos con scoped

Para evitar que los estilos escritos en un componente afecten a otros, puedes usar el atributo scoped. Este atributo asegura que tus estilos CSS se apliquen exclusivamente al componente donde se han definido. Para activar esta función, simplemente agrega scoped a la etiqueta <style>, por ejemplo:

<style scoped>
.button {
  color: blue;
}
</style>

Ahora, tus estilos se aplicarán únicamente a los elementos del componente en el que se encuentran.

¿Cómo manejar estilos dinámicos?

Los estilos dinámicos permiten cambiar la apariencia de un componente según ciertas condiciones, como estado activo o interacción del usuario. Vue facilita esto a través del uso de clases dinámicas.

Uso de v-bind para clases dinámicas

Con Vue, puedes enlazar clases dinámicamente usando la directiva v-bind o su abreviación con el prefijo :. Aquí tienes un ejemplo sencillo:

<template>
  <div :class="{ 'active': isActive }">Contenido dinámico</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  }
}
</script>

En este caso, la clase active se aplicará solo si la variable isActive es verdadera. Solo necesitas definir el estilo para la clase active en tu CSS:

<style scoped>
.active {
  color: aqua;
}
</style>

¿Cómo utilizar preprocesadores como Sass?

Vue soporta el uso de preprocesadores CSS, como Sass, para mejorar la flexibilidad de tus estilos. Sass te permite usar funcionalidades avanzadas como variables, anidación y mixins.

Instalación y configuración de Sass en Vue

Para empezar a utilizar Sass en tu proyecto Vue, instala el paquete de Sass:

npm install -D sass

Luego, asegúrate de especificar que deseas utilizar Sass en el componente Vue con lang="scss" en la etiqueta <style>:

<style lang="scss">
.container {
  .child {
    color: green;
  }
}
</style>

En este ejemplo, Sass permite la anidación, facilitando el mantenimiento y la claridad en tu código CSS.

¿Qué otras opciones de estilización hay disponibles?

Además de CSS y Sass, Vue permite integrar otros preprocesadores, o incluso bibliotecas de utilidades como Tailwind CSS. Puedes explorar estas opciones para encontrar la solución que mejor se adapte a tus necesidades y al estilo de tu proyecto.

Reto para expandir conocimientos

Te propongo un par de retos para seguir mejorando tus habilidades en Vue:

Intenta instalar y configurar otro preprocesador, como Less o Stylus, y aplica algunos cambios a tu proyecto.
Experimenta con Tailwind CSS instalándolo en tu proyecto Vue y realiza algunas personalizaciones en el estilo de tu aplicación.

Estilizar una aplicación Vue es un proceso que puede adaptarse a tus necesidades y recursos disponibles, y hay múltiples herramientas y métodos para explorar. ¡Sigue practicando y descubre cómo implementar estilos eficientes y personalizados en tus proyectos!

Luis Angel Santillan

Hace 9 meses

Instale Tailwind en su version 4, pero tuve algunos problemas, les dejo aqui que fue lo que hice para que funionara.

1 - Instale mediante el plugin de vite: npm install tailwindcss @tailwindcss/vite

2 - Modifique el file de vite.config.ts.

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

3 - Cree un archivo main.css donde importe tailwind

@import "tailwindcss";

4 - Importe el main.css en el main.js para usar tailwind. import './style/main.css'

5 - Use de la sigueinte manera mis styles css en vue, de manera importante use el @reference "@\style\main.css".

<style scoped>
    @reference "@\style\main.css";

    .count-lw {
        @apply text-red-600;
    }

    .count-hg{
        @apply text-green-600;
    }
</style>

NOTA: Por alguna razon no me funionaba hacerlo segun la instalacion de tailwind en la doc: como algunos aqui en el chat de clase, si alguien sabe si funciona asi dejemelo saber.

Conceptos básicos de Vue

Gráfica de barras reactiva con Vue.js

Creación de un Proyecto Vue desde Cero

Estructura de un Single File Component en Vue

Fundamentos de Vue.js: Montaje y Virtual DOM

Estilos en Vue: Scoped, Clases Dinámicas y Uso de Sass

Agregar estilos globales y scripts en aplicaciones Vue.js

Sintaxis Vue: v-bind y dobles corchetes

Props y Comunicación entre Componentes en VueJS

Validación de props en Vue con tipos y reglas

Vue 3: Uso y Ventajas de la Composition API

Reactividad en Vue

Reactividad en Vue con ref

Reactividad con `ref` en Vue 3: Creación y Uso Práctico

Uso de Watchers en Vue para Controlar Estados Reactivos

Computed properties en Vue y su caché

v-if vs v-show no Vue explicados

Ciclos de Vida de Componentes en Vue 3: Guía Completa

Composición en Vue

Pensamiento por componentes en Vue

Consumir una API con reactive en Vue

Diferencias entre reactive y ref en Vue 3

Renderizar listas con v-for en Vue

Slots y named slots en Vue

Herencia de Atributos en Componentes Vue: Uso y Ejemplos Prácticos

Manejo de eventos e inputs

Manejo de Inputs y Estado con VModel en Vue.js

Eventos y Modificadores en Vue: Focus y Blur en Searchbar

Eventos EMIT en Vue: Comunicación entre Componentes

Optimización en Vue

Componentes dinámicos con la tag component

Implementación de Modales y Manejo de Estado Global en Vue.js

Uso de Teleport en Vue para Optimizar el Renderizado de Modales

Uso de Composables en Vue para Reutilización de Lógica

refs en Vue para acceder al DOM real

Virtual DOM en Vue: Funcionamiento y Beneficios

Despliegue

Despliegue de Aplicaciones Vue: De Desarrollo a Producción

Cómo desplegar Vue en Netlify con GitHub

Despliegue de Aplicaciones Web con GitHub Actions y Pages

Estilos en Vue: Scoped, Clases Dinámicas y Uso de Sass