Como usar Laravel com Vue.js 3

O Vue.js é um dos frameworks JavaScript mais usados ​​para criar interfaces web e aplicativos de página única, junto com o Laravel torna-se uma ferramenta de desenvolvimento muito poderosa.

Para o desenvolvimento de web apps, uma ferramenta bastante utilizada é o vuejs, e neste artigo veremos como instalar e utilizar com o Laravel. A estrutura Vue.js foi definito quadro progressivo pois é especializado na criação de views HTML, e permite integrar facilmente com componentes de outras bibliotecas e projetos.

O sucesso do Vue.js também se deve à escolha de Laravel para sugeri-lo como um framework front-end, levando assim ao lançamento da versão 2.0.

Criação de projeto Laravel

O primeiro passo é, obviamente, criar um novo projeto no Laravel. Se você tiver um em seu computador, use-o ou crie um novo apenas para este tutorial.

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

Após o início do projeto, você precisará instalar o npm vícios. Para fazer isso, execute o seguinte comando dentro do diretório do seu projeto:

npm install

Depois que as dependências estiverem instaladas, execute o seguinte comando para criar os recursos e garantir que tudo realmente funcione:

npm run dev

O comando npm run dev executa uma variedade de verificações e construções, em particular Laravel Mix compilar o arquivo resources/js/app.js e o arquivo resources/css/app.css nos arquivos public/js/app.js e public/css/app.css.

Quando terminar, se tudo funcionar bem, você verá algo assim:

Instalando o Vue.js

Depois de preparar o projeto Laravel, podemos prosseguir com a instalação do Vue.js 3. Para fazer isso, execute o seguinte comando no diretório do seu projeto:

npm install --save-dev vue

Isso instalará o Vue.js como uma das dependências de desenvolvimento. Depois de compilar os recursos, seu arquivo JavaScript de produção será independente, então você só precisa instalar o Vue.js como uma dependência de desenvolvimento.

Para garantir que o Vue 3 foi instalado corretamente, abra o arquivo package.json (presente na raiz do projeto) e procure por "vue" na secção "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 você pode ver, o número da versão indica que o Vue.js 3 foi instalado. 

Primeira tentativa do Vue.js

Em seu arquivo welcome.blade.php coloque 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 você pode ver, criamos um elemento div com id "vue-app“. Dentro do elemento script criamos uma instância do Vue, onde passamos para o construtor um objeto que nos permite defifinalizar alguns parâmetros da aplicação, como dados e comportamentos, no nosso caso:

• el: Referência ao elemento div defifinalizado no html
• data: conjunto de dados

Assim que o objeto é criado, Vue adquire o div com id vue-app e cuida de substituir o espaço reservado {{ text }} com o valor contido no objeto de dados. Claro, este objeto pode conter mais de uma propriedade, mesmo de tipos diferentes: números, arrays e outros objetos aninhados são válidos

Além dessa substituição, o Vue também ativou seu motor e tornou o aplicativo responsivo, ou seja, qualquer alteração na propriedade text causará uma atualização instantânea do elemento correspondente no HTML.

Segundo teste do Vue.js

Para prosseguir para o segundo teste, primeiro você precisará instanciar o aplicativo para criar um novo componente. Você abre resources/app.js (o resources/js/app.js) e atualize seu conteúdo da seguinte forma:

// resources/app.js

require('./bootstrap');

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

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

Neste arquivo estamos criando uma nova instância Vue.js, e para fazer isso precisamos de um componente Vue que chamamos de HelloVue.vue. Para maiores informações consultar os documentos oficiais . 

Criar um novo arquivo resources/components/HelloVue.vue e digite o seguinte código:

// resources/components/HelloVue.vue

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

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

O arquivo que acabamos de criar é um componente Vue.js básico que imprime Hello Vue! como header1 na página. Por fim, abra o webpack.mix.js arquivo na raiz do projeto e atualize seu conteúdo da seguinte forma:

// 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 arquivo, a chamada do método .vue() irá compilar qualquer código Vue.js e agrupá-lo no arquivo JavaScript de produção. A função aceita um objeto onde você pode defiTermine a versão do Vue.js que você está usando. 

Depois de editar o arquivo webpack.mix.js você precisa compilar o código javascript. Para fazer isso, executamos o comando novamente npm run dev.

Por fim, para experimentar o Vue operacionalmente, abra o arquivo resources/views/welcome.blade.php e digite 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, juntamente com o componente criado anteriormente, produzirá uma mensagem de vídeo Olá Vue!, devido à instância do Vue.js ser montada em um elemento HTML com id app.

Execute seu aplicativo usando php artisan servee abra-o em seu navegador favorito.

Ercole Palmeri

Você também pode estar interessado em ...

• Service Providers no Laravel: o que são e como usar Service Providers no Laravel
• Como instalar o ChatGPT localmente no seu computador
• Como personalizar a impressão do projeto Gantt no Microsoft Project
• O que é um Framework em Engenharia de Software, defidefinição e tipos de frameworks
• Vem aí o primeiro testamento digital com blockchain