🚀 Template Vue - FiveM

Template limpio de Vue 3 para crear NUI en FiveM.

📁 Estructura

template-vue/
├── src/
│   ├── App.vue          ← Componente principal
│   └── main.js          ← Entry point
├── fivem/
│   ├── fxmanifest.lua   ← Manifest FiveM
│   ├── client.lua       ← Cliente (comando /testvue)
│   └── html/            ← Build se genera aquí
├── index.html           ← HTML desarrollo
├── vite.config.js       ← Config Vite
└── package.json         ← Dependencias

🚀 Instalación

Crear proyecto desde plantilla (recomendado)

npm create fivem-vue@latest nombre-proyecto

Luego:

cd nombre-proyecto
npm install
npm run build

1. Instalar dependencias

cd c:\xampp\htdocs\template-vue
npm install

2. Desarrollo (navegador)

npm run dev

Abre: http://localhost:5173

Para probar en el navegador, abre la consola y ejecuta:

window.postMessage({ action: 'show', username: 'Test' }, '*')

3. Build para FiveM

npm run build

Esto genera en fivem/html/:

• index.html
• script.js
• style.css

4. Copiar al servidor

fivem/ → TU_SERVIDOR/resources/[local]/template-vue/

Renombra la carpeta fivem a template-vue en tu servidor.

5. En FiveM

ensure template-vue
/testvue

✨ Características

• ✅ Vue 3 con Composition API
• ✅ Panel morado con gradiente
• ✅ 3 cards informativos
• ✅ Contador interactivo
• ✅ Cierre con ESC o botón X
• ✅ Callbacks Lua funcionales
• ✅ Configuración lista para producción

🎨 Personalizar

Cambiar diseño

Edita src/App.vue y modifica:

• Colores del gradiente
• Cards de información
• Botones y acciones

Luego:

npm run build

Agregar más funciones

1. Agrega callbacks en fivem/client.lua
2. Implementa la lógica en src/App.vue
3. Build y copia al servidor

📋 Comandos

| Comando | Descripción | |---------|-------------| | npm run dev | Desarrollo en navegador | | npm run build | Compilar para FiveM | | npm run watch | Auto-compilar al guardar |

🎯 Comando en el juego

/testvue

Abre/cierra el panel.

✅ Verificar que funciona

1. Inicia el servidor FiveM
2. Conéctate al servidor
3. Escribe /testvue
4. Debería aparecer un panel morado centrado

🔧 Troubleshooting

Panel no aparece

1. F8 (consola) → busca errores
2. Verifica que los archivos estén en html/
3. Revisa que el recurso se inició: Started resource template-vue

Cambios no se ven

npm run build
restart template-vue

Este template está listo para usar y modificar! 🎨