Variável do servidor direto para front-end sem request com Laravel e Vue.js
Hey! Here there’s the english version: https://medium.com/@tiagoab/send-variable-straight-to-front-end-without-request-with-laravel-and-vue-js-b9f8c58b0c1c
- P: Pra que isso serve?
- R: Uma aplicação front-end estática recebendo variáveis vindas do PHP.
Introdução
Fiz isso numa aplicação front-end que deveria ser customizada baseada no servidor em que ela estava hospedada. Era uma aplicação front só hospedada em vários servidores com endereços diferentes.
Para que isso funcione, a aplicação front-end deve ser compilada e servida pelo Laravel.
Isso é feito colocando os arquivos compilados da aplicação front-end no diretório /public do Laravel.
Fazendo acontecer
Inicie uma aplicação padrão com @vue/cli:
vue create front
Inicie uma aplicação Laravel com Composer:
composer create-project --prefer-dist laravel/laravel api
Para servir a aplicação front-end com o Laravel temos que alterar a rota principal no arquivo /routes/web.php:
Route::get('/{any}', function () {
return view('vue', [
'color' => $_SERVER['SERVER_PORT'] == 8000 ? 'red' : 'blue'
]);
})->where(['any' => '.*']);
A condição where ali funciona para ter rotas customizadas no front.
Também será necessário adicionar a pasta public na configuração das views do Laravel no arquivo /config/view.php:
'paths' => [
resource_path('views'),
public_path()
],
Adicione a variável $color no /public/index.html da aplicação front-end:
<style>
body {
background-color: {{ $color }};
}
</style>
*Note que isso é sintaxe do Blade e no ambiente de desenvolvimento do Vue não vai funcionar.
Faça o build da aplicação front-end com:
npm run build
Após o build transfira todo o conteúdo do diretório /dist para /public do Laravel e renomeie o arquivo index.html para vue.blade.php.
Para ver o resultado final, suba a aplicação Laravel em duas portas diferentes com:
php artisan serve --port 8000
php artisan serve --port 9000
O resultado deve ser:
Isso é só um exemplo simples de como passar uma variável do Laravel para o Vue.js. Neste caso foi só uma string definida no Laravel que foi impressa no CSS.
Qualquer coisa, grita ai: