I would like to get access to an .env variable using Vue JS.
In my .env file I have added the 'MIX_' prefix to the var.
MIX_VAR=key
And then in the vue component, I have in the created():
console.log(process.env.MIX_VAR);
I keep getting undefined as the result.
I have tried clearing config cache, but still getting the same issue. Any ideas?
in windows :
thats worked for me without any require in webpack.mix
... just add a new variable in env file with this prefix : MIX_
MIX_API_URL=http://laravel:8000
but need to restart php artisan serve and also restart npm run watch....
let api_url = process.env.MIX_API_URL;
console.log("my env variable:");
console.log(api_url);
in linux or docker:
i didnt use them yet
require('dotenv').config();You must build your JS for the env variables to be replaced. You can do this with npm or yarn
Pulled from the official docs @ https://laravel.com/docs/5.6/mix#environment-variables
Environment Variables
You may inject environment variables into Mix by prefixing a key in your .env file with MIX_:
MIX_SENTRY_DSN_PUBLIC=http://example.com
After the variable has been defined in your .env file, you may access via the process.env object. If the value changes while you are running a watch task, you will need to restart the task:
process.env.MIX_SENTRY_DSN_PUBLIC
The most important thing to remember is that you have to use Laravel Mix for this to work. Mix is what is injecting the environment variable.
require('dotenv').config(); to the top of webpack.mix.jsrequire('dotenv').config();npm install dotenv? Try recompile or delete node_modules folder and reinstall process.env.MIX_VAR / process.env.MIX_STRIPE_KEY
It's will work without any settings. Just run this command
npm run prod
You may use Environment Variables https://laravel.com/docs/10.x/vite#environment-variables.
File .env:
VITE_SOME_NAME=some value
File *.js:
console.log(import.meta.env.VITE_SOME_NAME);
Passing any static and dynamic parameters to the JS script. Any script - not only modules! Assembly in one file.
File some_template-vue.blade.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Laravel + VUE</title>
<script>
window.scrf_token = '{{ csrf_token() }}';
window.services = {
myService: {
constFromClass: '{{ App\Models\MyClass::CONST_NAME }}',
valueFromENV: '{{ env('SOME_PARAM', 'default value') }}',
urlFromRoute: '{{ route('some/url') }}',
urlFromRouteWithParam: '{{ route('some/url', ['param' => 'value']) }}'
}
}
</script>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<nav>
<a href="{{ route('home') }}">Home</a>
</nav>
<div id="app">
</div>
</body>
</html>
As result you will get in output:
<script>
window.scrf_token = 'AbCdEfAbCdEfAbCdEfAbCdEfAbCdEfAbCdEfAbCdEf';
window.services = {
myService: {
constFromClass: 'some value from class',
valueFromENV: 'some value from ENV',
urlFromRoute: 'some URL from Route',
urlFromRouteWithParam: 'some URL from Route with param'
}
}
</script>
File .env:
VITE_SERVICE_URL="/get_service"
VITE_SERVICE_SOME_PARAM="some value"
File routes/web.php:
Route::get(env('VITE_SERVICE_URL'), function () {
return '<script type="module"> console.log(import.meta.env.VITE_SERVICE_SOME_PARAM); </script>';
})->name('service');
File vite.config.js:
import { defineConfig, loadEnv } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig(({ command, mode }) => {
// https://v4.vitejs.dev/config/#using-environment-variables-in-config
// Load env file based on `mode` in the current working directory.
// Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
const env = loadEnv(mode, process.cwd(), '');
return {
define: {
__APP_ENV__: JSON.stringify(env.APP_ENV)
},
plugins: [
vue(),
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js'
],
refresh: true,
}),
]
}
});
This works for me
https://laravel.com/docs/8.x/mix#environment-variables
However, you will need to restart the task if the environment variable's value changes while the task is running: e.g If Watch is running then re-run it.
npm run watch
Follow these steps If you are using Laravel, Vue 3 with Vite:
You need to define your variables in the .env file with the VITE_ prefix like:
VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
Inside your Vue component, you can now access the environment variables using:
import.meta.env.VITE_APP_NAME
import.meta.env.PUSHER_APP_KEY
env()helper.