Como usar Laravel con Vue.js 3

Vue.js é un dos frameworks JavaScript máis utilizados para crear interfaces web e aplicacións dunha soa páxina, xunto con Laravel convértese nunha ferramenta de desenvolvemento moi poderosa.

Para o desenvolvemento de aplicacións web, unha ferramenta moi utilizada é vuejs, e neste artigo veremos como instalala e usala con Laravel. O framework Vue.js era definoite marco progresivo porque está especializada na creación de vistas HTML, e permite integrar facilmente con compoñentes doutras bibliotecas e proxectos.

O éxito de Vue.js tamén se debe á elección de Laravel para suxerilo como marco frontend, levando así ao lanzamento da versión 2.0.

Creación do proxecto Laravel

O primeiro paso é, por suposto, crear un novo proxecto en Laravel. Se tes un no teu ordenador, utilízao ou podes crear un novo só para este tutorial.

composer create-project laravel/laravel guide-laravel-vue

Despois de comezar o proxecto, terás que instalar o npm adiccións. Para iso, execute o seguinte comando dentro do directorio do proxecto:

npm install

Unha vez instaladas as dependencias, execute o seguinte comando para construír os recursos e asegurarse de que todo funciona realmente:

npm run dev

O mando npm run dev realiza unha variedade de comprobacións e compila, en particular Laravel Mix compilar o ficheiro resources/js/app.js e o arquivo resources/css/app.css en arquivos public/js/app.js e public/css/app.css.

Cando remate se todo funciona ben, verás algo así:

Instalando Vue.js

Despois de preparar o proxecto Laravel, podemos proceder a instalar Vue.js 3. Para iso, executa o seguinte comando no directorio do teu proxecto:

npm install --save-dev vue

Isto instalará Vue.js como unha das dependencias de desenvolvemento. Despois de compilar os recursos, o teu ficheiro JavaScript de produción será autónomo, polo que só tes que instalar Vue.js como dependencia de desenvolvemento.

Para asegurarse de que Vue 3 se instalou correctamente, abra o ficheiro package.json (presente na raíz do proxecto) e buscar "vue" na sección "devDependencies":

// package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.37"
    }
}

Como podes ver, o número de versión indica que Vue.js 3 foi instalado. 

Primeiro intento de Vue.js

No teu ficheiro welcome.blade.php pon o seguinte código:

<div id="vue-app">
    {{ text }}
</div>
<script>
window.vueApp = new Vue({
  el: '#vue-app',
  data: {
    text: 'Hello World from Vue!'
  }
});
</script>

Como podes ver creamos un elemento div con id "vue-app“. Dentro do elemento script creamos unha instancia de Vue, onde pasamos ao construtor un obxecto que nos permite deficompletar algúns parámetros da aplicación, como datos e comportamentos, no noso caso:

• el: Referencia ao elemento div defirematou no html
• data: conxunto de datos

En canto se crea o obxecto, Vue adquire o div con id vue-app e encárgase de substituír o marcador de posición {{ text }} co valor contido no obxecto de datos. Por suposto, este obxecto pode conter máis dunha propiedade, incluso de diferentes tipos: son válidos números, matrices e outros obxectos aniñados.

Ademais desta substitución, Vue tamén activou o seu motor e fixo que a aplicación responda, é dicir, calquera cambio na propiedade do texto provocará unha actualización instantánea do elemento correspondente no HTML.

Segunda proba de Vue.js

Para continuar coa segunda proba, primeiro terás que crear unha instancia da aplicación para crear un novo compoñente. Ti abres resources/app.js (o resources/js/app.js) e actualiza o seu contido do seguinte xeito:

// resources/app.js

require('./bootstrap');

import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';

createApp({
    components: {
        HelloVue,
    }
}).mount('#app');

Neste ficheiro estamos a crear unha nova instancia de Vue.js, e para iso necesitamos un compoñente Vue que chamamos HelloVue.vue. Para máis información consultar os documentos oficiais . 

Crea un ficheiro novo resources/components/HelloVue.vue e introduza o seguinte código:

// resources/components/HelloVue.vue

<template>
  <h1>Hello Vue!</h1>
</template>

<script>
export default {
    name: 'HelloVue'
}
</script>

O ficheiro que acabamos de crear é un compoñente Vue.js básico que se imprime Hello Vue! Vir header1 na páxina. Finalmente, abra o webpack.mix.js ficheiro na raíz do proxecto e actualice o seu contido do seguinte xeito:

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue({
        version: 3,
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Neste ficheiro, a chamada ao método .vue() compilará calquera código Vue.js e aglutinará no ficheiro JavaScript de produción. A función acepta un obxecto onde podes defifinaliza a versión de Vue.js que estás a usar. 

Despois de editar o ficheiro webpack.mix.js necesitas compilar o código javascript. Para iso, executamos de novo o comando npm run dev.

Finalmente, para probar Vue de forma operativa, abra o ficheiro resources/views/welcome.blade.php e introduza o seguinte código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel Vue</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app">
        <hello-vue />
    </div>
</body>
</html>

O código, xunto co compoñente creado previamente, producirá unha mensaxe de vídeo Ola Vue!, debido a que a instancia Vue.js está montada nun elemento HTML con id app.

Executa a túa aplicación usando php artisan serve, e ábreo no teu navegador favorito.

Ercole Palmeri

Tamén che pode interesar ...

• Provedores de servizos en Laravel: que son e como usar os provedores de servizos en Laravel
• Como instalar ChatGPT localmente no teu ordenador
• Como personalizar a impresión do proxecto Gantt en Microsoft Project
• Que é un Framework en Enxeñaría de Software, defidefinición e tipos de marcos
• Aquí chega o primeiro testamento dixital blockchain