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: