Как взять переменные Laravel env в Vue 3?

Чтобы использовать переменные окружения Laravel в Vue.js 3, вам потребуется некоторые настройки на стороне сервера и настройки на стороне клиента.

На сервере, вам нужно создать новый маршрут в Laravel, который будет возвращать значения переменных окружения в формате JSON. Например, вы можете создать маршрут "api/env", который будет выглядеть так:

// routes/api.php
use IlluminateSupportFacadesRoute;

Route::get('env', function () {
    return response()->json([
        'API_URL' => env('API_URL'),
        'API_KEY' => env('API_KEY'),
        // Другие переменные окружения, которые вам нужны
    ]);
});

Теперь, на стороне клиента, вы можете использовать Axios или Fetch API для получения значений переменных окружения из созданного маршрута:

import axios from 'axios';

axios.get('/api/env')
  .then(response => {
    const { API_URL, API_KEY } = response.data;
    // Далее вы можете использовать эти значения в вашем коде Vue.js
  })
  .catch(error => {
    console.error(error);
  });

Когда вы получите значения переменных окружения, вы можете сохранить их в вашем глобальном хранилище (например, Vuex) или использовать их непосредственно в компонентах Vue. Также вы можете использовать пакет dotenv, чтобы упростить работу с переменными окружения из файла .env на стороне клиента.

Обратите внимание, что вам необходимо быть осторожными при передаче конфиденциальной информации (например, ключа API) из переменных окружения сервера на клиентскую сторону, так как JavaScript код доступен клиентскому коду и может быть просмотрен злоумышленниками.