@luis-angel-martin-dzul/vue3-tmpl 0.0.4

package/README.md

@@ -0,0 +1,223 @@
+# vue3-tmpl
+
+Generador de plantillas para proyectos Vue 3 con Router, Pinia, Tailwind CSS y FontAwesome preconfigurados.
+
+---
+
+## Requisitos
+
+- Node.js 18+
+- npm 7+
+
+---
+
+## Uso
+
+```bash
+npx @luis-angel-martin-dzul/vue3-tmpl <nombre-del-proyecto>
+```
+
+### Ejemplo
+
+```bash
+npx @luis-angel-martin-dzul/vue3-tmpl mi-proyecto
+```
+
+---
+
+## Primeros pasos
+
+```bash
+cd mi-proyecto
+npm install
+npm run dev
+```
+
+---
+
+## Estructura generada
+
+```
+mi-proyecto/
+├── index.html
+├── vite.config.js              ← alias @ → src/
+├── postcss.config.js           ← Tailwind + autoprefixer
+├── package.json
+├── .gitignore
+└── src/
+    ├── main.js                 ← Vue + Pinia + Router + FontAwesome
+    ├── style.css               ← Tailwind + clases utilitarias (.btnGreen, .btnBlue, etc.)
+    ├── App.vue                 ← solo <RouterView />
+    ├── router/
+    │   └── index.js
+    ├── stores/
+    │   └── auth.js             ← store de ejemplo con Pinia
+    ├── models/
+    │   └── Auth.js             ← clase Auth con ping y updatePassword
+    ├── utils/
+    │   └── static.js           ← BASE url + apiServerRequest
+    └── views/
+        ├── auth/
+        │   └── LoginView.vue   ← formulario de login
+        ├── menu/
+        │   └── BaseLayout.vue  ← sidebar colapsable + header
+        ├── home/
+        │   └── HomeView.vue
+        ├── dashboard/
+        │   └── DashboardView.vue
+        ├── modulo/             ← ejemplo de submenu
+        │   ├── Opcion1View.vue
+        │   └── Opcion2View.vue
+        └── errors/
+            └── 404NotFound.vue
+```
+
+---
+
+## Rutas incluidas
+
+| Ruta | Componente | Descripción |
+|---|---|---|
+| `/login` | `LoginView` | Pantalla de inicio de sesión |
+| `/` | `HomeView` | Inicio (dentro de BaseLayout) |
+| `/dashboard` | `DashboardView` | Dashboard (dentro de BaseLayout) |
+| `/modulo/opcion-1` | `Opcion1View` | Ejemplo submenu opción 1 |
+| `/modulo/opcion-2` | `Opcion2View` | Ejemplo submenu opción 2 |
+| `/:pathMatch(.*)` | `404NotFound` | Página no encontrada |
+
+---
+
+## Incluido por defecto
+
+| Paquete | Uso |
+|---|---|
+| **Vue 3** | Framework |
+| **Vue Router 4** | Navegación entre vistas |
+| **Pinia** | Estado global |
+| **Tailwind CSS v4** | Estilos utilitarios |
+| **FontAwesome 6** | Iconos |
+
+---
+
+## Layout (BaseLayout)
+
+El sidebar incluye:
+- **Colapso** en desktop (icono + texto → solo icono)
+- **Overlay** en mobile con botón hamburguesa
+- **Estado activo** calculado por computed según la ruta actual
+- **Submenus** con animación de apertura/cierre y apertura automática al navegar directo a una ruta hija
+
+Para agregar un nuevo submenu, replica el bloque `Módulo` en `BaseLayout.vue` y añade las rutas correspondientes en `router/index.js`.
+
+---
+
+## Clases de botones
+
+Definidas en `src/style.css` listas para usar en cualquier vista:
+
+```html
+<button class="btnGreen px-4 py-2">Guardar</button>
+<button class="btnBlue  px-4 py-2">Buscar</button>
+<button class="btnOrange px-4 py-2">Editar</button>
+<button class="btnRose  px-4 py-2">Eliminar</button>
+<button class="btnWhite px-4 py-2">Cancelar</button>
+```
+
+---
+
+## Patrón de modelos
+
+Los modelos en `src/models/` usan `src/utils/static.js` como base para las peticiones HTTP:
+
+```js
+// src/utils/static.js
+export const BASE = 'https://tu-api.com/'
+
+export async function apiServerRequest(url, options = {}) {
+  try {
+    return await fetch(url, options)
+  } catch (error) {
+    console.error('Request error:', error)
+    return null
+  }
+}
+```
+
+```js
+// src/models/MiModelo.js
+import * as Static from '@/utils/static'
+
+class MiModelo {
+  #endpoint = 'mi-endpoint'
+
+  constructor() {
+    this.#endpoint = Static.BASE + this.#endpoint
+  }
+
+  async getAll() {
+    const request = await Static.apiServerRequest(this.#endpoint)
+    if (request?.status === 200) return await request.json()
+    return null
+  }
+
+  async create(data) {
+    const request = await Static.apiServerRequest(this.#endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    })
+    if (request?.status === 200) return await request.json()
+    return null
+  }
+}
+
+export default new MiModelo()
+```
+
+---
+
+## Patrón de stores (Pinia)
+
+```js
+// src/stores/miStore.js
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import MiModelo from '@/models/MiModelo'
+
+export const useMiStore = defineStore('mi-store', () => {
+  const datos   = ref([])
+  const loading = ref(false)
+
+  async function cargar() {
+    loading.value = true
+    datos.value   = await MiModelo.getAll()
+    loading.value = false
+  }
+
+  return { datos, loading, cargar }
+})
+```
+
+---
+
+## Scripts disponibles
+
+| Comando | Descripción |
+|---|---|
+| `npm run dev` | Servidor de desarrollo |
+| `npm run build` | Build de producción en `dist/` |
+| `npm run preview` | Vista previa del build |
+
+---
+
+## Publicar el CLI en npm
+
+```bash
+npm publish --access public
+```
+
+---
+
+## Autor
+
+Luis A Martin Dzul — luis.martin@gamasis.mx

package/bin/create.js

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+
+import {
+  mkdirSync, cpSync, readFileSync, writeFileSync,
+  existsSync, renameSync, readdirSync, statSync,
+} from 'node:fs'
+import { resolve, dirname, join, extname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const TEXT_EXTENSIONS = new Set(['.js', '.ts', '.vue', '.json', '.html', '.css', '.md', ''])
+
+function toPascalCase(str) {
+  return str
+    .replace(/[@/]/g, '-')
+    .split(/[-_]/)
+    .filter(Boolean)
+    .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+    .join('')
+}
+
+function replaceInFile(filePath, projectName, libName) {
+  const ext = extname(filePath)
+  if (!TEXT_EXTENSIONS.has(ext)) return
+  const content = readFileSync(filePath, 'utf-8')
+  const updated = content
+    .replaceAll('{{PROJECT_NAME}}', projectName)
+    .replaceAll('{{LIB_NAME}}', libName)
+  writeFileSync(filePath, updated, 'utf-8')
+}
+
+function walkAndReplace(dir, projectName, libName) {
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry)
+    if (statSync(full).isDirectory()) {
+      walkAndReplace(full, projectName, libName)
+    } else {
+      replaceInFile(full, projectName, libName)
+    }
+  }
+}
+
+// ── Main ────────────────────────────────────────────────────────
+const projectName = process.argv[2]
+
+if (!projectName) {
+  console.log('\nUso:  npx @luis-angel-martin-dzul/vue3-tmpl <nombre-del-proyecto>\n')
+  console.log('Ejemplo:')
+  console.log('  npx @luis-angel-martin-dzul/vue3-tmpl mi-proyecto\n')
+  process.exit(1)
+}
+
+const targetDir = resolve(process.cwd(), projectName)
+
+if (existsSync(targetDir)) {
+  console.error(`\nError: el directorio "${projectName}" ya existe.\n`)
+  process.exit(1)
+}
+
+const templateDir = resolve(__dirname, '../template')
+const libName = toPascalCase(projectName)
+
+console.log(`\nCreando proyecto "${projectName}"...`)
+
+mkdirSync(targetDir, { recursive: true })
+cpSync(templateDir, targetDir, { recursive: true })
+
+// Restaurar .gitignore (npm lo elimina al publicar)
+const gitignoreSrc = join(targetDir, '_gitignore')
+const gitignoreDst = join(targetDir, '.gitignore')
+if (existsSync(gitignoreSrc)) renameSync(gitignoreSrc, gitignoreDst)
+
+// Reemplazar placeholders en todos los archivos de texto
+walkAndReplace(targetDir, projectName, libName)
+
+console.log(`\n✓ Listo\n`)
+console.log(`Siguientes pasos:\n`)
+console.log(`  cd ${projectName}`)
+console.log(`  npm install`)
+console.log(`  npm run dev\n`)

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@luis-angel-martin-dzul/vue3-tmpl",
+  "version": "0.0.4",
+  "type": "module",
+  "description": "Generador de plantillas para proyectos Vue 3 con Router, Pinia, Tailwind y FontAwesome",
+  "bin": {
+    "vue3-tmpl": "./bin/create.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "scripts": {
+    "build": "npm pack",
+    "publish:npm": "npm publish --access public"
+  },
+  "license": "MIT"
+}

package/template/_gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+.DS_Store
+*.local
+.env
+.env.*

package/template/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{PROJECT_NAME}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "pinia": "^2.3.1",
+    "vue": "^3.5.24",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.8",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.1.8",
+    "vite": "^7.2.4"
+  }
+}

package/template/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}

package/template/src/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <RouterView />
+</template>

package/template/src/main.js

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import '@fortawesome/fontawesome-free/css/all.min.css'
+import './style.css'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+app.mount('#app')

package/template/src/models/Auth.js

@@ -0,0 +1,32 @@
+import * as Static from '@/utils/static'
+
+class Auth {
+  #endpoint = 'auth'
+
+  constructor() {
+    this.#endpoint = Static.BASE + this.#endpoint
+  }
+
+  async ping() {
+    const request = await Static.apiServerRequest(Static.BASE, {
+      method: 'GET',
+      mode: 'no-cors',
+    })
+    return request !== null
+  }
+
+  async updatePassword(data) {
+    const request = await Static.apiServerRequest(Static.BASE + 'user/update_password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    })
+    let response = null
+    if (request?.status === 200) {
+      response = await request.json()
+    }
+    return response
+  }
+}
+
+export default new Auth()

package/template/src/router/index.js

@@ -0,0 +1,56 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import LoginView  from '@/views/auth/LoginView.vue'
+import BaseLayout from '@/views/menu/BaseLayout.vue'
+import HomeView   from '@/views/home/HomeView.vue'
+import E404       from '@/views/errors/404NotFound.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+
+    {
+      path: '/login',
+      name: 'Login',
+      component: LoginView,
+    },
+
+    {
+      path: '/',
+      component: BaseLayout,
+      children: [
+        {
+          path: '',
+          name: 'Home',
+          component: HomeView,
+        },
+        {
+          path: '/dashboard',
+          name: 'Dashboard',
+          component: () => import('@/views/dashboard/DashboardView.vue'),
+        },
+
+        // Módulo (submenu)
+        {
+          path: '/modulo/opcion-1',
+          name: 'ModuloOpcion1',
+          component: () => import('@/views/modulo/Opcion1View.vue'),
+        },
+        {
+          path: '/modulo/opcion-2',
+          name: 'ModuloOpcion2',
+          component: () => import('@/views/modulo/Opcion2View.vue'),
+        },
+      ],
+    },
+
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      component: E404,
+    },
+
+  ],
+})
+
+export default router

package/template/src/stores/auth.js

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import Auth from '@/models/Auth'
+
+export const useAuthStore = defineStore('auth', () => {
+  const user    = ref(null)
+  const loading = ref(false)
+  const online  = ref(null)
+
+  async function ping() {
+    loading.value = true
+    online.value  = await Auth.ping()
+    loading.value = false
+    return online.value
+  }
+
+  async function updatePassword(data) {
+    loading.value  = true
+    const response = await Auth.updatePassword(data)
+    loading.value  = false
+    return response
+  }
+
+  return { user, loading, online, ping, updatePassword }
+})

package/template/src/style.css

@@ -0,0 +1,33 @@
+@import "tailwindcss";
+
+.scroller {
+    @apply overflow-y-auto;
+}
+.scroller::-webkit-scrollbar {
+    width: 6px;
+}
+.scroller::-webkit-scrollbar-thumb {
+    background-color: #a5b4fc;
+    border-radius: 9999px;
+}
+.scroller::-webkit-scrollbar-track {
+    background-color: #f3f4f6;
+}
+
+@layer components {
+    .btnGreen {
+        @apply bg-emerald-600 hover:bg-emerald-500 text-white rounded-sm disabled:bg-emerald-300 disabled:text-gray-500 cursor-pointer disabled:cursor-not-allowed;
+    }
+    .btnOrange {
+        @apply bg-orange-500 hover:bg-orange-400 text-white rounded-sm disabled:bg-orange-200 disabled:text-gray-500 cursor-pointer disabled:cursor-not-allowed;
+    }
+    .btnRose {
+        @apply bg-rose-500 hover:bg-rose-400 text-white rounded-sm disabled:bg-rose-200 disabled:text-gray-500 cursor-pointer disabled:cursor-not-allowed;
+    }
+    .btnBlue {
+        @apply bg-sky-600 hover:bg-sky-500 text-white rounded-sm disabled:bg-sky-300 disabled:text-gray-500 cursor-pointer disabled:cursor-not-allowed;
+    }
+    .btnWhite {
+        @apply bg-white hover:bg-gray-100 text-gray-700 border border-gray-300 rounded-sm disabled:bg-gray-300 disabled:text-gray-500 cursor-pointer disabled:cursor-not-allowed;
+    }
+}

package/template/src/utils/static.js

@@ -0,0 +1,11 @@
+export const BASE = 'https://www.google.com.mx/'
+
+export async function apiServerRequest(url, options = {}) {
+  try {
+    const response = await fetch(url, options)
+    return response
+  } catch (error) {
+    console.error('Request error:', error)
+    return null
+  }
+}

package/template/src/views/auth/LoginView.vue

@@ -0,0 +1,60 @@
+<script>
+export default {
+    name: 'LoginView',
+    data() {
+        return {
+            form: {
+                user: '',
+                pass: '',
+            },
+        }
+    },
+    methods: {
+        async handleLogin() {
+            this.$router.push('/')
+        },
+    },
+}
+</script>
+
+<template>
+    <div class="min-h-screen flex items-center justify-center bg-gray-100">
+        <div class="w-full p-8 bg-white border border-gray-100 rounded-lg shadow-md max-w-md">
+
+            <h2 class="text-2xl font-bold text-center mb-6 text-gray-800">Iniciar sesión</h2>
+
+            <form @submit.prevent="handleLogin" class="space-y-3">
+
+                <div class="flex flex-col gap-1">
+                    <label class="text-sm font-medium text-gray-700">Usuario</label>
+                    <input
+                        v-model="form.user"
+                        type="text"
+                        placeholder="Usuario"
+                        required
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+                    />
+                </div>
+
+                <div class="flex flex-col gap-1">
+                    <label class="text-sm font-medium text-gray-700">Contraseña</label>
+                    <input
+                        v-model="form.pass"
+                        type="password"
+                        placeholder="••••••••"
+                        required
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+                    />
+                </div>
+
+                <button
+                    type="submit"
+                    class="mt-2 w-full bg-indigo-500 text-white py-2 rounded-lg hover:bg-indigo-600 transition text-sm font-medium cursor-pointer"
+                >
+                    Ingresar
+                </button>
+
+            </form>
+        </div>
+    </div>
+</template>

package/template/src/views/dashboard/DashboardView.vue

@@ -0,0 +1,9 @@
+<script>
+export default {
+    name: 'DashboardView',
+}
+</script>
+
+<template>
+    <div class="text-gray-700 font-semibold">Dashboard</div>
+</template>

package/template/src/views/errors/404NotFound.vue

@@ -0,0 +1,16 @@
+<script>
+export default {
+    name: 'NotFound',
+}
+</script>
+
+<template>
+    <div class="min-h-screen flex flex-col items-center justify-center bg-gray-100 text-gray-500">
+        <i class="fa-solid fa-triangle-exclamation text-5xl mb-4 text-gray-300" />
+        <p class="text-6xl font-bold text-gray-300">404</p>
+        <p class="mt-2 text-sm">Página no encontrada</p>
+        <router-link to="/" class="mt-6 text-sm text-sky-600 hover:underline">
+            Volver al inicio
+        </router-link>
+    </div>
+</template>

package/template/src/views/home/HomeView.vue

@@ -0,0 +1,9 @@
+<script>
+export default {
+    name: 'HomeView',
+}
+</script>
+
+<template>
+    <div class="text-gray-700 font-semibold">Home</div>
+</template>

package/template/src/views/menu/BaseLayout.vue

@@ -0,0 +1,205 @@
+<script>
+export default {
+    name: 'BaseLayout',
+    data() {
+        return {
+            sidebarOpen: false,
+            collapsed: false,
+            openMenus: {},
+        }
+    },
+    computed: {
+        currentRoute() {
+            return this.$route.path
+        },
+        activeItem() {
+            const path = this.currentRoute
+            if (path === '/')                 return 'home'
+            if (path === '/dashboard')        return 'dashboard'
+            if (path === '/modulo/opcion-1')  return 'modulo-opcion-1'
+            if (path === '/modulo/opcion-2')  return 'modulo-opcion-2'
+            return ''
+        },
+    },
+    watch: {
+        currentRoute: {
+            handler(path) {
+                if (path.startsWith('/modulo/')) {
+                    this.openMenus = { ...this.openMenus, modulo: true }
+                }
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        toggleSidebar() {
+            if (window.innerWidth < 768) {
+                this.sidebarOpen = !this.sidebarOpen
+            } else {
+                this.collapsed = !this.collapsed
+            }
+        },
+        toggleMenu(menu) {
+            this.openMenus[menu] = !this.openMenus[menu]
+        },
+        isMenuOpen(menu) {
+            return this.openMenus[menu]
+        },
+        enter(el) {
+            el.style.height = '0'
+            el.style.opacity = '0'
+            requestAnimationFrame(() => {
+                el.style.height = el.scrollHeight + 'px'
+                el.style.opacity = '1'
+            })
+        },
+        leave(el) {
+            el.style.height = el.scrollHeight + 'px'
+            el.style.opacity = '1'
+            requestAnimationFrame(() => {
+                el.style.height = '0'
+                el.style.opacity = '0'
+            })
+        },
+    },
+}
+</script>
+
+<template>
+    <div class="flex h-screen bg-white">
+
+        <!-- Sidebar -->
+        <aside :class="[
+            'fixed md:static z-40 top-0 left-0 h-full border-r border-gray-200 bg-white transition-all duration-300',
+            sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
+            collapsed ? 'w-20' : 'w-64',
+        ]">
+
+            <!-- Logo -->
+            <div class="p-4 h-16 border-b border-gray-200 flex items-center justify-center">
+                <span v-if="!collapsed" class="text-xl font-bold text-sky-600">
+                    {{PROJECT_NAME}}
+                </span>
+                <span v-else class="text-xl font-bold text-sky-600">
+                    <i class="fa-solid fa-cube" />
+                </span>
+            </div>
+
+            <!-- Menu -->
+            <nav class="p-4">
+                <ul class="space-y-1">
+
+                    <!-- Home -->
+                    <li>
+                        <router-link to="/" :class="[
+                            'flex items-center gap-3 px-3 py-2.5 rounded-lg transition cursor-pointer',
+                            activeItem === 'home'
+                                ? 'bg-sky-200 text-sky-700'
+                                : 'hover:bg-sky-100 text-slate-500',
+                        ]">
+                            <span class="text-xl"><i class="fa-solid fa-house" /></span>
+                            <span v-if="!collapsed">Home</span>
+                        </router-link>
+                    </li>
+
+                    <!-- Dashboard -->
+                    <li>
+                        <router-link to="/dashboard" :class="[
+                            'flex items-center gap-3 px-3 py-2.5 rounded-lg transition cursor-pointer',
+                            activeItem === 'dashboard'
+                                ? 'bg-sky-200 text-sky-700'
+                                : 'hover:bg-sky-100 text-slate-500',
+                        ]">
+                            <span class="text-xl"><i class="fa-solid fa-chart-line" /></span>
+                            <span v-if="!collapsed">Dashboard</span>
+                        </router-link>
+                    </li>
+
+                    <!-- Módulo (submenu) -->
+                    <li>
+                        <button @click="toggleMenu('modulo')" :class="[
+                            'w-full flex items-center justify-between px-3 py-2.5 rounded-lg transition cursor-pointer',
+                            activeItem.startsWith('modulo-')
+                                ? 'bg-sky-200 text-sky-700'
+                                : 'hover:bg-sky-100 text-slate-500',
+                        ]">
+                            <div class="flex items-center gap-3">
+                                <span class="text-xl"><i class="fa-solid fa-layer-group" /></span>
+                                <span v-if="!collapsed">Módulo</span>
+                            </div>
+                            <span
+                                v-if="!collapsed"
+                                :class="isMenuOpen('modulo') ? 'rotate-90' : ''"
+                                class="transition-transform"
+                            >
+                                <i class="fa-solid fa-angle-right" />
+                            </span>
+                        </button>
+
+                        <!-- Submenu -->
+                        <transition @enter="enter" @leave="leave">
+                            <ul v-if="isMenuOpen('modulo') && !collapsed" class="mt-1 space-y-1 pl-9">
+                                <li>
+                                    <router-link to="/modulo/opcion-1" :class="[
+                                        'block p-2 rounded-lg text-sm transition cursor-pointer',
+                                        activeItem === 'modulo-opcion-1'
+                                            ? 'bg-sky-100 text-sky-600'
+                                            : 'hover:bg-sky-50 text-slate-500',
+                                    ]">
+                                        Opción 1
+                                    </router-link>
+                                </li>
+                                <li>
+                                    <router-link to="/modulo/opcion-2" :class="[
+                                        'block p-2 rounded-lg text-sm transition cursor-pointer',
+                                        activeItem === 'modulo-opcion-2'
+                                            ? 'bg-sky-100 text-sky-600'
+                                            : 'hover:bg-sky-50 text-slate-500',
+                                    ]">
+                                        Opción 2
+                                    </router-link>
+                                </li>
+                            </ul>
+                        </transition>
+                    </li>
+
+                </ul>
+            </nav>
+
+        </aside>
+
+        <!-- Overlay mobile -->
+        <div v-if="sidebarOpen" @click="sidebarOpen = false" class="fixed inset-0 bg-black/40 z-30 md:hidden" />
+
+        <!-- Main -->
+        <div class="flex-1 flex flex-col bg-gray-100 overflow-hidden">
+
+            <!-- Header -->
+            <header class="bg-white h-16 px-4 border-b border-gray-200 flex items-center justify-between shrink-0">
+                <button @click="toggleSidebar" class="text-gray-400 text-xl cursor-pointer">
+                    <i class="fa-solid fa-bars" />
+                </button>
+                <div class="flex items-center gap-3">
+                    <div class="flex flex-col leading-tight text-right">
+                        <span class="hidden sm:block text-sm font-bold text-gray-800">Usuario</span>
+                        <span class="hidden sm:block text-xs font-semibold text-gray-500">Administrador</span>
+                    </div>
+                    <img src="https://i.pravatar.cc/40" class="w-9 h-9 rounded-full object-cover" />
+                </div>
+            </header>
+
+            <!-- Content -->
+            <main class="p-4 scroller flex-1">
+                <router-view />
+            </main>
+
+        </div>
+    </div>
+</template>
+
+<style scoped>
+ul {
+    overflow: hidden;
+    transition: height 0.3s ease, opacity 0.2s ease;
+}
+</style>

package/template/src/views/modulo/Opcion1View.vue

@@ -0,0 +1,9 @@
+<script>
+export default {
+    name: 'Opcion1View',
+}
+</script>
+
+<template>
+    <div class="text-gray-700 font-semibold">Opción 1</div>
+</template>

package/template/src/views/modulo/Opcion2View.vue

@@ -0,0 +1,9 @@
+<script>
+export default {
+    name: 'Opcion2View',
+}
+</script>
+
+<template>
+    <div class="text-gray-700 font-semibold">Opción 2</div>
+</template>

package/template/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+})