DevWebPHP
Image
15/04/2020

Variável do Laravel para Vue.js sem request

# Variável do servidor direto para front-end sem request com Laravel e Vue.js

  • 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
1

Inicie uma aplicação Laravel com Composer:

composer create-project --prefer-dist laravel/laravel api
1

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' => '.*']);
1
2
3
4
5

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()
],
1
2
3
4

Adicione a variável $color no /public/index.html da aplicação front-end:

<style>
    body {
        background-color: {{ $color }};
    }
</style>
1
2
3
4
5

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
1

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
1
2

O resultado deve ser: Resultado final

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.

Copyright © DevWebPHP 2020