Vite - Vue 3 - PHP configuración.

Hace un tiempo usaba vue pero era muy lento al empaquetar con webpack, mi tostadora apenas podia observar los cambios y era un delirio verlos de manera instantanea, pero llego Vite y la verdad es muy veloz, ya que por debajo usa esbuild un empaquetador programado en GO un lenguaje de programación concurrente y compilado.

Hasta el momento vite acepta marcos como vue, react y svelte para mas info en VITE.

Este es un ejemplo de como implementar vite-vue3 con php.

Este ejemplo se basa en este repo vite-php-setup los creditos a andrefelipe el crack del repo xD.

Bueno les traigo una configuracion básica y espero quizá les sirva.

Estado y requisitos.

En que versión realice la configuración.

• Npm: 6.14.13
• Node Js: 14.17.0

Los requisitos mínimos.

• Node Js versión >= 12.0.0

Pasos.

1.- Ir a la carpeta de nuestro front-end, recuerda iniciar el servidor de php ya sea si utilizas wamp o xampp.

cd vue-php-vite/vite-php

2.- Para las dependencias:

npm install

3.- Para el modo desarrollo:

npm run dev

4.- Si queremos compilar a producción:

npm run build

Ahora bien en nuestra carpeta public tenemos nuestro index.php donde se inicia nuestra App, ahi llamamos a la función:

vite('src/main.js') // hace referencia al manifest.json que carga los scripts

En el archivo helpers.php hay una constante que nos indica si queremos pasar a modo desarrollo o producción, en desarrollo la app en el server php dejará de funcionar ya que este solo llama los archivos previamente compilados, al ejecutar npm run dev con liveReload plugin observa los archivos .php y si sufren algún cambio se reflejará en el servidor que inicia Vite.

Notas en desarrollo.

• Durante el desarrollo en el archivo helpers.php debemos especificar el puerto, que inicia nuestro servidor de Vite (en caso se cambie el puerto).