Como instalar o Vue 3 no Laravel 9 com Vite
Iniciando o desenvolvimento de uma aplicação com Laravel v9, VueJs3 e Vite
Conteúdo:
- Descrição do ambiente utilizado
- Composer
- NVM (Node Version Manager)
- Node
- Laravel 9
- VueJS 3
- Vite
- Exemplo prático
- Referências
- Descrição do artigo
Nessa configuração serão utilizados o framework Laravel 9.x, VueJS 3 em conjunto com Vite para a estruturação do front-end. E utilizaremos o Composer e o NPM para gerenciar mais facilmente as dependências dessa estrutura.
Aqui vamos utilizar um ambiente Windows com WSL2 o que, em tese, deve seguir os mesmos passos, caso o mesmo seja realizado em um ambiente Linux/Ubuntu.
- Composer/NVM/Node
– Para instalar o Composer, basta efetuar o download aqui, e seguir as instruções do site oficial. A instalação do mesmo é bastante simples.
– Já o NVM, iremos fazer a instalação dentro do WSL2. Por segurança, desinstale todas as versões do NODE já instaladas e pelo terminal (já dentro do WSL), basta utilizar o curl ou o wget:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
ou
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
Conforme é citado na documentação oficial.
Feito isso, vamos digitar o comando “nvm install v18.17.1”, onde v18.17.1 é a versão do node que iremos instalar. Sinta-se a vontade para testar outras versões. Com o NVM é possível instalar mais de uma versão e selecionar qual que pretendemos utilizar no momento.
Para verificar as versões do node instaladas, utilize o comando “nvm list”. E caso queira trocar de versão, basta utilizar “nvm use vXX.XX.X”.
Com esses passos, já temos nossa tríade Composer/NVM/NodeJs prontos para iniciar a construção da aplicação.
- Laravel 9
A documentação do Laravel é bastante completa e estarei aqui apenas mencionando os comandos necessários para uma nova instalação.
Lembrando que estamos utilizando o terminal do WSL, execute:
composer create-project laravel/laravel:^9.0 nome-pasta-app
Aguarde a instalação terminar e caso exiba a pergunta “Do you want to remove the existing VCS (.git, .svn..) history?” utilize a opção “Y”, pois estamos criando um projeto próprio com create-project, por isso não há necessidade de termos o histórico do repositório original.
Agora já podemos conferir a versão instalada com “php artisan –version” e verificar a mesma rodando com “php artisan serve”.
O comando –version deve apresentar algo do tipo “Laravel Framework 9.52.15”
E o serve deve exibir no terminal o endereço:porta para acessar a aplicação e no navegador irá exibir a tela de boas vindas do Laravel, respectivamente, algo como:
- Instalação do VueJS 3
Nosso próximo passo é instalar o VueJS 3 e suas dependências.
Vamos começar navegando até a pasta do projeto e rodando o comando “npm install”, assim estaremos instalando todas as nossas dependências de frontend.
O segundo passo é instalar o Vue e o vue-loader (que é utilizado para interagir com webpacks e possibilitar a manipulação de componentes com outros webpacks). Para isso vamos rodar o comando “npm install vue@next vue-loader@next”
- Instalação do Vite
E por fim, instalaremos o Vite utilizando “npm i @vitejs/plugin-vue”.
O Vite nada mais é do que um frontend builder. Ele será o responsável por agrupar o seu código (css e js) e disponibilizar em localhost:porta um ambiente de desenvolvimento em localhost.
Em seguida, vamos configurar o vite.config.js, designando os caminhos/arquivos para que sejam criados bundles para a sua aplicação.
Abra o arquivo vite.config.js que está na raiz do projeto e substitua o conteúdo pelo código abaixo:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});- Após essa alteração vamos iniciar a nossa aplicação pelo terminal chegando até a pasta raiz da mesma e rodando o comando “npm run dev”. Isso irá inicializar o servidor Vite que irá rodar em background, lendo os seus assets JS e CSS. Na verdade, nada mais é do que um watch que irá escutar as alterações dos seus arquivos resources/js/app.js e resources/css/app.css.
- Exemplo prático
Após toda a parte de configuração do framework, vamos criar alguns exemplos práticos:- Criando um app Vue
No arquivo “resources/js/app.js” adicione o seguinte código:
- Criando um app Vue
import {createApp} from 'vue';
import App from './App.vue';
createApp(App).mount("#app");- Ainda dentro da pasta “resources/js/app.js”, crie um arquivo chamado “App.vue” e dentro dele cole o conteúdo a seguir:
<template>
Hello world!!!
</template>- Dentro da pasta “resources/views”, crie um arquivo chamado app.blade.php e dentro dele vamos colar um código html simples apenas para rodar o nosso app vue.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
@vite('resources/css/app.css')
</head>
<body class="antialiased">
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>
- Repare que temos uma div com o id=”app”, que é onde nossa aplicação será carregada, pois lá no import utilizamos um “mount”, justamente passando esse atributo como seletor.
Depois, dentro do arquivo de rotas “routes/web.php”, vamos adicionar uma rota para o nosso app:
Route::get(‘/appvue’, function () {
return view(‘app’);
});
- Feito isso, basta rodar o “php artisan serve”, acessar nossa rota citada acima e pronto, temos o nosso Laravel devidamente configurado com Vue 3 e o Vite para nos auxiliar com os webpacks.
Let’s code!!!!
