Laravel incluye js
Usted puede notar que los errores aparecerán sólo cuando el archivo app.js se incluye en una plantilla. Tengo este problema en proyectos con andamiaje de autenticación generado por el paquete laravel/ui en Laravel 9 o inferior. Las versiones de Laravel utilizan Vue 2, Laravel Mix, y Webpack. En este artículo, voy a mostrar cómo solucionar un error que se produce en los proyectos con plantillas de hoja generados por los siguientes comandos:
Esto significa que todo el código dentro de este elemento se considera una plantilla de Vue. Sin embargo, Vue no permite etiquetas script u otros scripts externos en sus plantillas. Dado que esta plantilla se utiliza para construir cualquier página en su proyecto, incluyendo la página de inicio de sesión, todos los contenidos de sus vistas blade se consideran como plantilla Vue, también.
Usando Vue en tu proyecto, puedes hacer todo lo que necesites usando sus capacidades y componentes. Sin embargo, si necesitas añadir un script externo, tienes dos maneras diferentes: desactivar Vue o incluir tu script fuera del elemento #app.
La primera solución que puede parecer buena es eliminar la importación del archivo app.js del archivo de plantilla. Pero es mejor que no lo hagas porque aún puedes usarlo para importar JQuery u otras librerías JS necesarias y construirlas todas en un único archivo con Laravel Mix. Además, entregar todos tus scripts como un archivo y mantenerlos dentro del proyecto hace que tu aplicación sea más rápida e independiente de servicios CDN externos. Sin embargo, puedes eliminar la inicialización de Vue del archivo app.js:
¿Cómo utilizar JavaScript en Laravel?
Laravel no requiere que utilices un framework o librería JavaScript específica para construir tus aplicaciones. De hecho, no tienes que usar JavaScript en absoluto. Sin embargo, Laravel incluye algunos andamios básicos para que sea más fácil empezar a escribir JavaScript moderno utilizando la biblioteca Vue.
¿Cómo añadir js a un archivo?
Para incluir un archivo JavaScript externo, podemos utilizar la etiqueta script con el atributo src . Ya has utilizado el atributo src al utilizar imágenes. El valor del atributo src debe ser la ruta a su archivo JavaScript. Esta etiqueta script debe incluirse entre las etiquetas <head> de su documento HTML.
Laravel javascript en blade
Un gran mensaje debe aparecer en su pantalla como la imagen de abajo.Después de la instalación exitosa de compositor estamos listos para instalar Laravel.Escriba a su cmd el comando :composer global require laravel/installer
Si Laravel está instalado correctamente veremos algo como lo que se muestra a continuación.Project CreationDespués de que Composer y Laravel estén instalados como deseamos ahora estamos listos para crear nuestro primer proyecto.First of all , with the cmd go to the folder in which your project will be stored. En mi ejemplo , no voy a cambiar la ruta y voy a mantener el cmd por defecto.Escriba el comando :laravel new yourProjectName
Esto tomará un tiempo. Después de que la creación haya terminado ve a la ruta y mira si existe una carpeta con tuNombreDeProyecto.Si abres la carpeta verás muchas otras carpetas dentro.Felicidades… Si quieres ejecutarlo primero tienes que entrar en el proyecto con el comando cd de tu cmd y a continuación teclear :php artisan serve
Lo anterior significa que cada vez que escribas la dirección localhost:8000/ entonces se mostrará el archivo tuProyecto/recursos/vistas/bienvenida.hoja.php. Ahora si quieres que miNuevaVista.blade.php se muestre cada vez que la url sea localhost:8000/miNuevaVista entonces tienes que cofigurar el web.php y hacer que se vea como:<?php
Laravel mix
Gracias a Turbo, el panel de administración emula la Single Page Application, cargando los recursos sólo en la primera llamada y dando la impresión de volver a renderizar el contenido en el navegador en lugar de las transiciones naturales estándar entre páginas.
Sólo queda conectar el script recibido al panel en el archivo de configuración o en el proveedor de servicios utilizando el método registerResource. Puedes hacer lo mismo con las hojas de estilo, lo que te permitirá construir eficazmente la lógica de la aplicación.
Muchos desarrolladores adoran la simplicidad y potencia de Vue.js para construir interfaces de usuario interactivas y responsivas. En este tutorial, te mostraremos cómo envolver componentes Vue dentro de un controlador Stimulus para que puedas integrarlos fácilmente.
Ahora, cuando se cargue la página, se creará la instancia de Vue.js y se mostrará el mensaje en el elemento HTML. A continuación, puede utilizar Vue.js como lo haría normalmente en el ámbito del controlador Stimulus.
Laravel 9 incluir archivo js en blade
Yo uso Webpack para casi todos mis proyectos en estos días. Webpack es potente, pero francamente un dolor en el culo para configurar, por lo que para navegar por este uso Laravel Mix que recubre la configuración en un bonito, fácil de usar, script.
Puede que notes el .default añadido al módulo aquí, esto es porque cuando usas import() en módulos ES6 debes hacer referencia a la propiedad .default ya que es el objeto módulo real que será devuelto cuando se resuelva la promesa.
No necesitamos importar cada uno de estos parciales en la página, siempre y cuando estemos incluyendo nuestro archivo de salida principal, en este caso site.js. Automáticamente sabrá dónde y cuándo importar los scripts adicionales.
Hay tantas maneras de optimizar nuestros sitios en la web moderna, sin embargo, a veces nos saltamos estos pasos, y el usuario sufre. Con un cambio de código relativamente pequeño, puedes conseguir grandes resultados.