Agregar estilos globales y scripts en aplicaciones Vue.js

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:004:39

Agregar estilos globales y scripts en aplicaciones Vue.js

Curso de Vue.js

Clase 6 de 34

Clase 6 / 34

Recursos

¿Cómo añadir estilos globales en tu aplicación Vue?

Añadir estilos globales en un proyecto web es una práctica común que facilita la gestión uniforme del aspecto visual. Desde frameworks como Bootstrap o Tailwind CSS hasta fuentes de Google, estos elementos son esenciales para la cohesión estilística. En este apartado exploramos cómo implementar estilos globales de manera eficiente en una aplicación Vue, asegurando que tu proyecto se mantenga ágil y bien estructurado.

¿Dónde crear y cómo enlazar el archivo CSS central?

Para establecer estilos globales, un primer paso es crear un archivo CSS principal dentro de tu estructura de proyecto. Sugiero denominarlo main.css y ubicarlo en la carpeta de assets.

/* Estilo global para eliminar el margen del body */
body {
    margin: 0;
}

Es importante importar este archivo CSS en main.js, el punto de entrada de la aplicación. Así, asegurarás que estos estilos se carguen en todas las páginas de tu aplicación.

// Importación del archivo CSS global en main.js
import '@assets/main.css';

¿Cómo integrar Google Fonts en la aplicación?

La incorporación de nuevas fuentes aporta personalidad a tu diseño. Google Fonts es una opción estándar en la industria debido a su sencillez. A continuación, te detallo cómo integrar la fuente Roboto.

Dirígete a Google Fonts y busca la fuente deseada.
Tras seleccionar Roboto, busca la opción "get embeded code" para obtener el enlace de inclusión.
Este código de incrustación debe ir en el <head> del archivo index.html.

<!-- Inclusión de Google Font en index.html -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Luego, en tu archivo CSS global, establece la fuente como predeterminada.

/* Aplicación de la fuente Roboto en todo el cuerpo del documento */
body {
    font-family: 'Roboto', sans-serif;
}

¿Qué sugerencias seguir al integrar estilos globales y scripts de terceros?

La incorporación de múltiples scripts y estilos puede tener un impacto en el rendimiento de la aplicación. Aquí tienes algunas recomendaciones clave:

Evita sobrecargar tu aplicación: Importar frameworks completos puede aumentar significativamente el tamaño del bundle. Elige cuidadosamente qué estilos o scripts realmente necesitas.
Scripts externos en index.html: Los elementos traídos de CDNs, como estilos o scripts de Google Fonts, deben añadirse directamente en index.html. Esto optimiza la carga y centraliza los elementos críticos.
Criticidad y carga asíncrona: Prioriza la carga de recursos críticos y utiliza cargas asíncronas cuando sea posible para acelerar el tiempo de renderizado inicial.

Con estas estrategias, mejorarás significativamente la gestión de estilos y scripts en tu aplicación Vue, fomentando un equilibrio entre estética y rendimiento. Recuerda siempre evaluar el peso de tu aplicación y optimizar con precaución. Ahora estás listo para implementar estilos globales efectivamente. ¡Sigue aprendiendo y mejorando tus proyectos!

Julián Camilo Giraldo Mejía

Hace 2 años

Hola tengo dos preguntas: ¿Cual es la diferencia de emportar con ./assets/main.css' y con @/assets/main.css'?

Por otro lado, ¿porque importamos unas cosas entre { } y otras sin usar los { }?

Yahir Eduardo Bravo Tafur

Hace 2 años

En mi opinión, más que todo es por el orden que permite usar rutas con un alias (como lo es @) que usando rutas relativas.

Colocando un ejemplo más acorde, supongamos el siguiente caso:

Tienes la siguiente composición:

├── src

│ ├── App.vue

│ ├── components/

│ │ ├── HelloWorld.vue

│ │ ├── lists/

│ │ │ ├── main/

│ │ │ │ ├── ListView.vue

│ │ │ │ ├── ListItem.vue

│ │ ├── icons/

│ │ │ ├── IconCommunity.vue

Dada la estructura anterior, si se desea importar el componente IconCommunity en el componente ListItem usando rutas relativas, se debe escribir:

import IconCommunity from '../../icons/IconCommunity.vue';

Pero usando alias, se puede escribir:

import IconCommunity from '@/icons/IconCommunity.vue';

Como ves, mejora la legibilidad de la importación, pero no cambia el comportamiento.

Hans González

Hace un año

Para poder añadir un poco más de la primera respuesta , con respecto a los alías : si usas vite, lo configuras como un ruta directa, ya no es necesario escribir la ruta completa.

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

Agregar estilos globales y scripts en aplicaciones Vue.js