Laravel and Vue .env dynamic MIX_ Variables, with laravel mix and vue-cli

In Laravel and Vue applications, it is common to have environment variables that need to be configured differently for different environments, such as development, staging, and production. Laravel provides a simple way to manage these variables using the .env file, while Vue CLI also has its way of handling environment variables. In this answer, we will discuss how to use dynamic MIX_ variables in Laravel and Vue applications.

First, let's understand what MIX_ variables are. MIX_ variables are custom variables that can be defined in Laravel Mix configuration file webpack.mix.js. These variables can be used to pass dynamic values to Vue components or Laravel views. For example, you might want to define a MIX_API_URL variable to store the base URL for your API.

To define a MIX_ variable in Laravel Mix, you can use the .env.json file or the process.env object. Here's how you can define a MIX_API_URL variable using both methods:

Using .env.json file:

Create a .env.json file in the root directory of your Laravel project and define the variable as follows:

{
  "MIX_API_URL": "http://localhost:8000/api"
}

Then, in your webpack.mix.js file, you can access this variable as follows:

const mix = require('laravel-mix');

mix.webpackConfig({
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'MIX_API_URL': process.env.MIX_API_URL
    })
  ]
});

mix.js('resources/js/app.js', 'public/js')
  .vue()
  .browserSync('localhost:3000');

Now, you can access this variable in your Vue components or Laravel views as follows:

export default {
  data() {
    return {
      apiUrl: window.MIX_API_URL
    }
  }
}

Or in a Laravel view:

<a href="{{ route('api.user.index') }}/{{ $id }}" target="_blank">
  {{ __('Show') }}
</a>

<script>
  console.log(window.MIX_API_URL);
</script>

Using process.env object:

You can also define MIX_ variables directly in the process.env object in your webpack.mix.js file:

const mix = require('laravel-mix');

mix.webpackConfig({
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'MIX_API_URL': JSON.stringify(process.env.MIX_API_URL || 'http://localhost:8000/api')
    })
  ]
});

mix.js('resources/js/app.js', 'public/js')
  .vue()
  .browserSync('localhost:3000');

In this example, we are using a ternary operator to check if the MIX_API_URL variable is already defined in the process.env object. If it is not defined, we set it to the default value 'http://localhost:8000/api'.

Now, you can access this variable in your Vue components or Laravel views as follows:

export default {
  data() {
    return {
      apiUrl: window.MIX_API_URL
    }
  }
}

Or in a Laravel view:

<a href="{{ route('api.user.index') }}/{{ $id }}" target="_blank">
  {{ __('Show') }}
</a>

<script>
  console.log(window.MIX_API_URL);
</script>

Now, let's discuss how to make these MIX_ variables dynamic based on the environment.

To make MIX_ variables dynamic based on the environment, you can use Laravel's .env file and Vue CLI's mode option.

First, let's define the MIX_API_URL variable in the .env file for each environment:

# .env.development
MIX_API_URL=http://localhost:8000/api

# .env.production
MIX_API_URL=https://example.com/api

Then, in your webpack.mix.js file, you can use the mode option of Vue CLI to load the appropriate .env file based on the environment:

const mix = require('laravel-mix');

mix.webpackConfig({
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  mode: process.env.NODE_ENV,
  plugins: [
    new webpack.DefinePlugin({
      'MIX_API_URL': process.env.MIX_API_URL
    })
  ]
});

mix.js('resources/js/app.js', 'public/js')
  .vue()
  .browserSync('localhost:3000');

In this example, we are setting the mode option of Vue CLI to the value of the NODE_ENV environment variable. Laravel automatically sets this variable based on the environment you are running in.

Now, when you run your Laravel application in development mode, it will load the .env.development file and set the MIX_API_URL variable to 'http://localhost:8000/api'. When you build your application for production and run it, it will load the .env.production file and set the MIX_API_URL variable to 'https://example.com/api'.

You can also define other environment variables in the same way and access them in your Vue components or Laravel views using the window.MIX_ syntax as we discussed earlier.

That's it! You now know how to use dynamic MIX_ variables in Laravel and Vue applications. Let me know if you have any questions or if there's anything else I can help you with.