mrbryan1502/symfony-vue

Plantilla moderna Symfony 7 + Vue 3 con Vite, TypeScript, Pinia y Vue Router

v1.0.0 2026-07-05 00:54 UTC

Requires

• php: >=8.2
• ext-ctype: *
• ext-iconv: *
• doctrine/doctrine-bundle: ^2.18.3
• doctrine/doctrine-migrations-bundle: ^3.7
• doctrine/orm: ^3.6.7
• pentatrion/vite-bundle: ^8.2.4
• phpdocumentor/reflection-docblock: ^6.0.3
• phpstan/phpdoc-parser: ^2.3.2
• symfony/asset: 7.4.*
• symfony/asset-mapper: 7.4.*
• symfony/console: 7.4.*
• symfony/doctrine-messenger: 7.4.*
• symfony/dotenv: 7.4.*
• symfony/expression-language: 7.4.*
• symfony/flex: ^2.11
• symfony/form: 7.4.*
• symfony/framework-bundle: 7.4.*
• symfony/http-client: 7.4.*
• symfony/intl: 7.4.*
• symfony/mailer: 7.4.*
• symfony/mime: 7.4.*
• symfony/monolog-bundle: ^3.0|^4.0.2
• symfony/notifier: 7.4.*
• symfony/process: 7.4.*
• symfony/property-access: 7.4.*
• symfony/property-info: 7.4.*
• symfony/runtime: 7.4.*
• symfony/security-bundle: 7.4.*
• symfony/serializer: 7.4.*
• symfony/string: 7.4.*
• symfony/translation: 7.4.*
• symfony/twig-bundle: 7.4.*
• symfony/ux-turbo: ^2.36
• symfony/validator: 7.4.*
• symfony/web-link: 7.4.*
• symfony/yaml: 7.4.*
• twig/extra-bundle: ^2.12|^3.24
• twig/twig: ^2.12|^3.28

Requires (Dev)

• phpunit/phpunit: ^11.5.55
• symfony/browser-kit: 7.4.*
• symfony/css-selector: 7.4.*
• symfony/debug-bundle: 7.4.*
• symfony/maker-bundle: ^1.67
• symfony/stopwatch: 7.4.*
• symfony/web-profiler-bundle: 7.4.*

Conflicts

• symfony/symfony: *

Replaces

• symfony/polyfill-ctype: *
• symfony/polyfill-iconv: *
• symfony/polyfill-php72: *
• symfony/polyfill-php73: *
• symfony/polyfill-php74: *
• symfony/polyfill-php80: *
• symfony/polyfill-php81: *
• symfony/polyfill-php82: *

MIT

Published on Packagist.org on 2026-07-05 01:30 UTC

README

Plantilla moderna para aplicaciones web con Symfony 7 en el backend y Vue 3 + TypeScript en el frontend, integrados mediante Vite.

Stack

Capa	Tecnología
Backend	Symfony 7.4 + PHP 8.2+ / Doctrine ORM / PostgreSQL
Frontend	Vue 3 + TypeScript + Pinia + Vue Router
Build	Vite + vite-plugin-symfony + @vitejs/plugin-vue
Estilo	CSS moderno con design system oscuro y gradientes

Instalación

Puedes crear un nuevo proyecto de dos formas:

Via Composer (recomendado)

composer create-project mrbryan1502/symfony-vue mi-app

Esto instala automáticamente las dependencias de PHP y las de frontend (pnpm).

Via npx / pnpm dlx

# Con npm
npx @mrbryan1502/create-symfony-vue mi-app

# Con pnpm
pnpm dlx @mrbryan1502/create-symfony-vue mi-app

Esto crea el proyecto e instala tanto las dependencias PHP (composer) como las de frontend (npm/pnpm/yarn automáticamente detectado).

Manualmente (clonando el repo)

git clone https://github.com/mrbryan1502/symfony-vue.git mi-app
cd mi-app

# Las dependencias se instalan automáticamente con cualquiera de estos:
composer install    # instala PHP + dispara pnpm install
pnpm install        # instala frontend + dispara composer install

Requisitos

• PHP >= 8.2
• Composer
• pnpm >= 11.9 (o npm/yarn/bun)
• Symfony CLI (recomendado para desarrollo)

Ejecución en desarrollo

cd mi-app
pnpm dev

Esto lanza simultáneamente:

• symfony serve — servidor PHP de desarrollo
• vite — servidor de assets con HMR

Abrir https://localhost:8000 en el navegador.

Variables de entorno

cp .env .env.local
# Editar DATABASE_URL y APP_SECRET en .env.local

Comandos útiles

Comando	Descripción
pnpm dev	Desarrollo con hot reload
pnpm build	Build de producción para frontend
pnpm format	Formatear código con Prettier
pnpm lint	Verificar formato
composer run-script	Scripts definidos en composer.json

Estructura del proyecto

symfony-vue/
├── assets/                  # Frontend (Vue 3 + TypeScript)
│   ├── main.ts              # Punto de entrada
│   ├── app.css              # Estilos globales
│   ├── router/              # Configuración de Vue Router
│   ├── src/
│   │   └── App.vue          # Componente raíz (welcome page)
│   ├── styles/              # Estilos adicionales
│   └── vendor/              # Assets de vendor
├── config/                  # Configuración de Symfony (YAML)
├── migrations/              # Migraciones de Doctrine
├── packages/
│   └── create-symfony-vue/  # Paquete npm del CLI scaffold
├── public/                  # Document root
│   └── build/               # Build de Vite (generado)
├── scripts/                 # Utilidades internas
│   └── sync-template.mjs    # Sincroniza template con el CLI
├── src/                     # Código PHP (App\ namespace)
│   ├── Controller/
│   ├── Entity/
│   ├── Repository/
│   └── ...
├── templates/               # Twig templates
│   ├── base.html.twig
│   └── app.html.twig        # Template que monta Vue
├── tests/                   # Tests PHPUnit
├── translations/            # Traducciones
├── vite.config.js           # Configuración de Vite
├── tsconfig.json            # Configuración de TypeScript
└── composer.json

Integración Symfony + Vite

La comunicación entre Symfony y Vite se maneja mediante:

• vite-plugin-symfony — plugin de Vite
• pentatrion/vite-bundle — bundle de Symfony

Los entry points se definen en assets/main.ts y se referencian en Twig mediante:

{{ vite_entry_link_tags('app') }}
{{ vite_entry_script_tags('app') }}

Para más información, consulta la documentación de Symfony con Vite.

Producción

pnpm build
composer dump-env prod

El servidor Symfony sirve los assets compilados desde public/build/.

Desarrollo del CLI

# Sincronizar los cambios del template al paquete npm
node scripts/sync-template.mjs

# Probar el CLI localmente
node packages/create-symfony-vue/bin/index.js mi-app-test

Publicación

# Publicar en Packagist (composer)
# 1. Push a GitHub
# 2. Crear release en GitHub
# 3. Packagist detecta automáticamente

# Publicar en npm
cd packages/create-symfony-vue
npm publish

Licencia

MIT