Utilizar variables de entorno de Laravel en Vuejs 2

En esta entrada vamos a ver lo sencillo que es utilizar variables de entorno de Laravel en Vuejs 2 para poder utilizar los datos de nuestro entorno en el cliente.

Para ello voy a crear un sencillo ejemplo creando una variable de entorno que contiene la url del sitio y así poder utilizarla en Vuejs 2, mira el siguiente archivo .env.

APP_NAME="My App"
APP_ENV=local
APP_KEY=base64:dUSskF7ornJU9qCKfg0g1yxd6WgC+K41rigDjsCBUV8=
APP_DEBUG=true
APP_URL=https://miapp.test

#ESTA VARIABLE LA UTILIZAREMOS EN VUEJS 2
MIX_APP_URL="${APP_URL}"

Si te fijas he creado la variable de entorno MIX_APP_URL la cual reutiliza el contenido de la variable APP_URL con la sintaxis ${APP_URL}.

Para poder acceder al valor de la variable MIX_APP_URL desde el cliente simplemente debemos hacer lo siguiente en nuestro cliente con Vuejs 2.

<template>
  <div>{{ url }}
</template>

<script>
  export default {
    data () {
      return {
        url: null
      }
    },
    mounted () {
      this.url = process.env.MIX_APP_URL;
    }
  }
</script>

A través de process.env podremos acceder a las variables de nuestro archivo .env siempre que éstas comiencen por MIX_, es el único requisito que debemos cumplir.