Los que llevan ya un tiempo de desarrollo en Vue se darán cuenta que volver a empezar un proyecto nuevo y agregar todas las dependencias una y otra vez, puede ser una tarea tediosa. Es por eso que con Vite, una poderosa herramienta de desarrollo para el frontend, se puede agilizar este proceso gracias a los templates o plantillas personalizadas. Una de las mas completas es Vitesse, una planilla de arranque que contiene todo lo que necesitas para realizar una aplicación en Vue.JS.

Vitesse utiliza algunos de los plugins mas utilizados para realizar aplicaciones SSG, y si desarrollar en SSG no es lo tuyo, existen variantes de este template para SSR y SPA. En vez de utilizar npm, se utiliza pnpm que es mas potente y administra mejor el espacio en disco.

• ⚡️ Vue 3, Vite 2, pnpm, ESBuild – Para mayor Velocidad desde el principio
• 🗂 File based routing – Rutas basadas en Archivos
• 📦 Components auto importing – Importado automático de componentes
• 🍍 State Management via Pinia – Control de Estados con Pinia (No usa Vuex)
• 📑 Layout system Sistema de Layouts (Similar a Laravel)
• 📲 PWA – Webs Progresivas
• 🎨 Windi CSS – Una especie de macro framework de TailwindCSS
• 😃 Use icons from any icon sets, with no compromise – Iconos de todo tipo on demand
• 🌍 I18n ready – Traducciones a un click
• 🗒 Markdown Support – Soporte para MD
• 🔥 Use the new <script setup> syntax – Nueva Sintaxis de Vue 3
• 📥 APIs auto importing – Auto Importacion de API
• 🖨 Server-side generation (SSG) via vite-ssg
• 🦔 Critical CSS via critters
• 🦾 TypeScript
• ⚙️ Unit Testing con Vitest, E2E Testing con Cypress en GitHub Actions
• ☁️ Implementar en Netlify con un click

Al ser un template publico en GitHub, Vitesse tiene muchas variantes según el uso que le quieran dar a la aplicación de Vuejs. Algunos de los mas populares son:

Official

• vitesse-lite – Versión liviana de Vitesse
• vitesse-nuxt3 – Vitesse para Nuxt 3
• vitesse-nuxt-bridge – Vitesse para Nuxt 2 con Bridge
• vitesse-webext – WebExtension Vite starter template

Community

• vitesse-addons by @johncampionjr – Agregadas nuevas opciones y configuraciones como Prettier y StoryBook
• vitesse-ssr-template by @frandiox – Vitesse pero con SSR
• vitespa by @ctholho – Vitesse pero para SPA
• vitailse by @zynth17 – Vitesse pero con TailwindCSS
• vitesse-modernized-chrome-ext by @xiaoluoboding – ⚡️ Modernized Chrome Extension Manifest V3 Vite Starter Template
• vitesse-stackter-clean-architect by @shamscorner – Vitesse con Clean Architecture
• vitesse-enterprise by @FranciscoKloganB – Vitesse para Empresas y Proyectos grandes

Como Instalar Vitesse para desarrollo?

Lo primero que hay que tener en cuenta para instalar Vitesse es contar con una version de NPM > 14. Abrir una consola con Derechos de Administrador y ejecutar:

npm install -g pnpm

Ese comando va a instalar pnpm de manera global para poder instalar y compilar el proyecto. Ahora para clonar el Repositorio:

npm install -g pnpm
cd my-vitesse-app
pnpm i

Listo, una vez que finalice de instalar Vitesse vas a poder correr la pagina de prueba con:

pnpm dev

Como compilar un proyecto con Vitesse?

Para compilar el proyecto de Vitesse vas a necesitar correr el comando:

pnpm build

Solo copiar y pegar la carpeta /dist en el servidor para pasarlo a produccion.

Mas información en el siguiente enlace: https://github.com/antfu/vitesse