Quasar ENV

Description.md

So you want to use ENV vars. Good on you. Here is a quick snippet to help you manage that.

/config/index.js

module.exports = {
  NODE_ENV: 'development',
  FOO: 'bar'
}

/src/pages/Index.vue

<template>
  <q-page class="flex flex-center">
    <div class="layout-view">
      API: {{ api }}
      <br>
      FOO: {{ bar }}
    </div>
  </q-page>
</template>

<style>
</style>

<script>
export default {
  name: 'PageIndex',
  data () {
    return {
      api: process.env.API,
      bar: process.env.FOO
    }
  }
}
</script>

/quasar.conf.js

const config = require('./config/index.js')
...
module.exports = function (ctx) {
  return {
    ...
    build: {
      env: ctx.dev
        ? { // so on dev we'll have
          API: JSON.stringify('https://dev.api.com'),
          FOO: JSON.stringify(config.FOO)
        }
        : { // and on build (production):
          API: JSON.stringify('https://prod.api.com')
        },