How to use .env files in laravel + vuejs project?

Question

I have laravel(5.8) + vuejs(2.6.10) project in single repo.

Currently, i am using env variables for frontend(vuejs) from .env of laravel using prefix MIX.

context:
https://medium.com/@weehong/laravel-5-7-vue-vue-router-spa-5e07fd591981

But

I need separate .env files for vuejs other than .env of laravel. is it possible? how?

I need make build according to .env files(while not not using Vue-cli)

Make your own env.js file and and decalre your all variable in that file and import it in app.js file — Karan Sadana
– Karan Sadana, Commented Aug 6, 2019 at 5:26
why don't you just create a new config file and set it via extra .env values. I'd create lines in my default .env file like VUE_SOME_VALUE or FRONTEND_SOME_VALUE — Buraco
– Buraco, Commented Aug 6, 2019 at 6:31
@KaranSadana i'm not want to declare variables as config, need to declare in .env. so we can make build according to .env files. — Ketan Akbari
– Ketan Akbari, Commented Aug 6, 2019 at 6:47
@JinalSomaiya it's useful while project created using vue-cli. i have combine larave_ vuejs project setup and used laravel mixin — Ketan Akbari
– Ketan Akbari, Commented Aug 6, 2019 at 6:50

Ohgodwhy · Accepted Answer · 2019-08-06 07:05:12Z

2

Laravel already provides this functionality out of the box. For any variables you want exposed to laravel/mix, you just prefix them with MIX_

MIX_HOST=https://example.com

And you can now access it within your Vue application as process.env.MIX_HOST.

Mix will not include any other variables from your .env file if they're not prefixed with MIX_.

For a more controlled approach, you can use dotenv for this and specify the filename of your .env file you wish to load in your Vue application:

yarn add -D dotnev // npm i dotenv -D

Then in your main js file for your Vue app:

require('dotenv').config({
  path: path.resolve(process.cwd(), '.env-vue')
})

This will pollute the process.env global with any values in this file.

answered Aug 6, 2019 at 7:05

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use .env files in laravel + vuejs project?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related