Crear un Proyecto Moderno con Vue 3 y Herramientas Complementarias

Una guía integral para configurar Vue 3, Vite, TypeScript, Tailwind CSS, Pinia, Vue Router, ESLint y Prettier

Highlights

Configuración Integral: Desde la creación del proyecto usando Vite hasta la integración de linters y formateadores.
Herramientas Modernas: Aprovecha las ventajas de TypeScript, Tailwind CSS y Pinia para una experiencia de desarrollo robusta.
Flujo de Trabajo Eficiente: Integración de ESLint y Prettier para mantener tu código limpio y coherente.

Introducción

En esta guía se explica cómo crear un proyecto utilizando Vue 3 junto a una variedad de herramientas y librerías modernas que optimizan el entorno de desarrollo. Se hace uso de Vite para el empaquetado del proyecto, TypeScript para garantizar un tipado estático y mayor robustez en el código, Tailwind CSS para un diseño eficiente y escalable, Pinia como herramienta de gestión de estado, Vue Router para la navegación en la aplicación y la combinación de ESLint y Prettier para asegurar un estilo de código estandarizado. Esta guía paso a paso está diseñada para ofrecer una visión integral y práctica de cada uno de los pasos necesarios.

Paso 1: Creación del Proyecto Base

Inicializando con Vite y Vue 3

El primer paso consiste en establecer la base de tu proyecto utilizando Vite, un empaquetador moderno que permite una configuración rápida y altamente optimizada, especialmente para Vue 3. Utilizaremos una plantilla preconfigurada con TypeScript para asegurarnos de que contamos con todas las ventajas del tipado estático.

Comandos Iniciales

Abre tu terminal y ejecuta el siguiente comando para crear un nuevo proyecto. Asegúrate de reemplazar "mi-proyecto-vue" por el nombre deseado para tu aplicación:


    # Crear un proyecto Vue 3 con Vite y TypeScript
    npm create vite@latest mi-proyecto-vue -- --template vue-ts

Una vez creado, muévete al directorio de tu proyecto mediante:


    cd mi-proyecto-vue

Ejecuta la instalación de dependencias esenciales:


    npm install

Paso 2: Instalación y Configuración de Dependencias Adicionales

Integración de Vue Router y Pinia

Para gestionar la navegación dentro de tu aplicación, se instala Vue Router, mientras que Pinia se encargará de la gestión de estado global. Estos componentes son fundamentales para construir aplicaciones modernas y escalables.

Instalación de Vue Router y Pinia


    # Instalación de Vue Router y Pinia
    npm install vue-router@4 pinia

Después de la instalación, deberás configurar cada uno de estos módulos en tu aplicación. Los archivos de configuración se crearán dentro del directorio src para mantener organizado el proyecto.

Configuración de Tailwind CSS

Tailwind CSS es un framework de diseño que ofrece clases utilitarias para estilizar de forma rápida y flexible. Se integrará mediante la instalación de Tailwind y sus dependencias, así como su configuración a través de un archivo específico.

Instalación y Configuración Básica


    # Instalación de Tailwind CSS y dependencias
    npm install -D tailwindcss postcss autoprefixer

    # Creación de la configuración de Tailwind y PostCSS
    npx tailwindcss init -p

Ahora, edita el archivo tailwind.config.js para definir las rutas de tu proyecto donde se utilizarán las clases de Tailwind. Deberás configurar el contenido para incluir tus archivos HTML y todos los componentes Vue:


    // tailwind.config.js
    /<b> @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./index.html",
        "./src/</b>/*.{vue,js,ts,jsx,tsx}"
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }

A continuación, en tu hoja de estilos principal (por lo general src/assets/main.css o src/style.css), agrega las directivas de Tailwind:


    @tailwind base;
    @tailwind components;
    @tailwind utilities;

Paso 3: Configuración Específica de Vue Router y Pinia

Configurando Vue Router

A continuación, se configura Vue Router. Crea el directorio src/router y crea un archivo llamado index.ts en él. Este archivo contendrá la configuración de las rutas.

Código de Configuración de Vue Router


    // src/router/index.ts
    import { createRouter, createWebHistory } from 'vue-router'
    import HomeView from '../views/HomeView.vue'

    const routes = [
      {
        path: '/',
        name: 'home',
        component: HomeView
      },
      // Agrega más rutas conforme a tus necesidades
    ]

    const router = createRouter({
      history: createWebHistory(import.meta.env.BASE_URL),
      routes
    })

    export default router

Configurando Pinia

Para la gestión del estado global de la aplicación, se usará Pinia. Crea o edita el archivo src/main.ts para inicializar y configurar Pinia junto a Vue Router.

Código de Integración en main.ts


    // src/main.ts
    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    import { createPinia } from 'pinia'
    import './assets/main.css' // Importa Tailwind CSS

    const app = createApp(App)

    app.use(router)
    app.use(createPinia())

    app.mount('#app')

Paso 4: Configuración de ESLint y Prettier

Preparando un Código Limpio y Consistente

ESLint y Prettier son herramientas esenciales para mantener la calidad y la coherencia en tu código. ESLint ayuda a identificar y corregir problemas en el código JavaScript/TypeScript, mientras que Prettier se encarga del formateo del código. Aquí, configuraremos ambos para que trabajen conjuntamente en armonía.

Instalación de Dependencias


    npm install -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier

Crea y configura el archivo .eslintrc.js en la raíz de tu proyecto con el siguiente contenido:


    // .eslintrc.js
    module.exports = {
      root: true,
      env: {
        browser: true,
        node: true,
        es2021: true
      },
      extends: [
        'eslint:recommended',
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier'
      ],
      parserOptions: {
        ecmaVersion: 'latest',
        parser: '@typescript-eslint/parser',
        sourceType: 'module'
      },
      plugins: [
        'vue',
        '@typescript-eslint'
      ],
      rules: {
        'vue/multi-word-component-names': 'off',
        'prettier/prettier': 'error'
      }
    }

Luego, crea un archivo .prettierrc en la raíz del proyecto, donde defines las reglas de formateo:


    {
      "semi": true,
      "trailingComma": "es5",
      "singleQuote": true,
      "printWidth": 100,
      "tabWidth": 2
    }

Se recomienda agregar scripts en package.json para facilitar la ejecución de estas herramientas:


    // package.json (fragmento)
    "scripts": {
      "dev": "vite",
      "build": "vite build",
      "serve": "vite preview",
      "lint": "eslint --ext .js,.ts,.vue src",
      "format": "prettier --write ."
    }

Paso 5: Configuración Adicional y Verificación

Integrar Extensiones en VS Code (Opcional)

Para aprovechar al máximo estas herramientas, se recomienda configurar Visual Studio Code con extensiones como Volar (para Vue), ESLint y Prettier. Al habilitar la función de "format on save" y "code actions", VS Code integrará automáticamente la corrección y formateo de tu código.

Ajustes de VS Code


    // .vscode/settings.json
    {
      "editor.formatOnSave": true,
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
    }

Resumen y Tabla de los Pasos Clave

Para consolidar la información presentada, se resume a continuación los pasos fundamentales acompañados de sus respectivas acciones:

Fase	Acción	Comando / Archivo
Creación de Proyecto	Inicializar proyecto con Vite y Vue 3 + TypeScript	`npm create vite@latest mi-proyecto-vue -- --template vue-ts`
Instalación Inicial	Instalar dependencias básicas	`npm install`
Configuración de Rutas y Estado	Instalar y configurar Vue Router y Pinia	`npm install vue-router@4 pinia`
Integración de Tailwind	Instalar y configurar Tailwind CSS	`npm install -D tailwindcss postcss autoprefixer`
Linting y Formateo	Instalar ESLint y Prettier y configurar reglas	`npm install -D eslint prettier ...`

Detalles Adicionales y Buenas Prácticas

Organización del Proyecto

Es vital mantener un proyecto organizado, especialmente cuando se utilizan múltiples tecnologías. Se recomienda tener una estructura clara de directorios, con carpetas dedicadas para componentes, vistas, rutas, tiendas, y activos (como CSS y recursos estáticos). Esta organización no solo facilita la mantenibilidad, sino que también mejora la escalabilidad del proyecto.

Uso de TypeScript

Aprovechar TypeScript en tu proyecto garantiza un tipado estricto, lo que reduce la probabilidad de errores en tiempo de ejecución. La integración inicial de la plantilla de TypeScript en Vite permite utilizar las ventajas del autocompletado y la verificación de tipos, mejorando la experiencia de desarrollo y permitiendo la evolución del código a medida que el proyecto crece.

Optimización con ESLint y Prettier

La combinación de ESLint y Prettier asegura que el código se mantenga limpio, consistente y libre de errores comunes. Estas herramientas ayudan a mantener un formato homogéneo en el equipo de desarrollo, evitando discrepancias en el estilo del código. Es recomendable integrarlas en el flujo de trabajo del editor, permitiendo la corrección automática en cada guardado.

Implementación de Vue Router y Pinia

Vue Router y Pinia son fundamentales para aplicaciones Vue modernas. Vue Router proporciona rutas declarativas para una navegación sencilla y limpia, mientras que Pinia ofrece una alternativa moderna a Vuex para la gestión del estado, con una sintaxis más amigable y menor complejidad. La configuración modular de estos sistemas permite una fácil ampliación y mantenimiento del proyecto.

Conclusión

Esta guía detallada te proporciona una serie de pasos claros y estructurados para configurar un proyecto con un stack tecnológico moderno basado en Vue 3, Vite, TypeScript, Tailwind CSS, Pinia, Vue Router, ESLint y Prettier. Al seguir estos pasos, asegurarás una buena base para el desarrollo de aplicaciones web robustas, escalables y de alta calidad. La integración de herramientas como Tailwind CSS permite un desarrollo rápido de interfaces, mientras que ESLint y Prettier contribuyen a mantener un código limpio y profesional. Además, la modularidad proporcionada por Vue Router y Pinia facilita la organización del proyecto a medida que crece en complejidad.

Cada fase del proceso, desde la inicialización del proyecto con Vite hasta la configuración final de herramientas de linting y formateo, está diseñada para mejorar la eficiencia y la calidad del desarrollo. Se recomienda revisar cada archivo de configuración y ajustar las reglas según las necesidades específicas de tu proyecto y el equipo de desarrollo. Con esta estructura, estarás bien equipado para enfrentar los retos del desarrollo moderno en el ecosistema de Vue.

Referencias

Add Tailwind to your Typescript Vue3 Vite Application - Medium
Vue 3 with Vite and Tailwind CSS Guide - Tailwind CSS
Vite + Vue 3 + TypeScript + Tailwind CSS Starter Template - Morioh
Project Set-Up with Vue 3, Vite, Linter and Tailwind CSS - Medium
ESLint and Prettier with Vue 3 and Vite - DEV Community