I stumbled upon the same question and solved it as documented by the Quasar team:

Instead of using this css:

@media screen and (min-width: 599px) {
  .q-footer {
    display: none;
  }
}

I now do this in my template:

<div class="lt-sm">Small display</div>
<div class="gt-xs">Large display</div>

Another option if you can’t use css classes is using $q.screen in your <script> section of a component:

 methods: {
    setSomething() {
      if (this.$q.screen.width > 1023) { 
         console.log('screen large') 
      }
      else {
         console.log('screen small') 
      }
    },
  },
  watch: {
    "$q.screen.width"() {
      this.setSomething()
    }
  }

If it’s not in a component and you want to know the screen size on the startup of your app for example you can use the following:

import { Screen } from 'quasar'
Screen.lt.sm
  ? console.log('screen small')
  : console.log('screen large')

I hope this helps someone.

@tof06 if you ever want to try something new and possibly better, you should give vuex-patify a go. I’m sure you’ll love it.

The API keys are for Azure authentication and contain the Application Client ID. This is indeed not sensitive information but still, I would like to configure things in one place.

The .env file also allows fine grained control by not having to set these things in the app. So after all I think it’s best to create a simple .env file and use it with the standard dotenv library.

They suggest to preload it like this:

node -r dotenv/config your_script.js

Is there a way to do this with Quasar? And where is the production port defined in Quasar? I only see this for the devServer:

    devServer: {
      https: false,
      port: 8080,
      open: true // opens browser window automatically
    },

@s-molinari Just a small question on this. In the docs this is mentioned:

Does that mean when you can use the following:

import authPopup from 'src/services/auth/authPopup'

Or does it need to be prefixed like shown in many Webpack config?

import authPopup from '@src/services/auth/authPopup'

Currently there is an official extension for using environement variables.

quasar ext add @quasar/dotenv

The API keys are for Azure authentication and contain the Application Client ID. This is indeed not sensitive information but still, I would like to configure things in one place.

The .env file also allows fine grained control by not having to set these things in the app. So after all I think it’s best to create a simple .env file and use it with the standard dotenv library.

They suggest to preload it like this:

node -r dotenv/config your_script.js

Is there a way to do this with Quasar? And where is the production port defined in Quasar? I only see this for the devServer:

    devServer: {
      https: false,
      port: 8080,
      open: true // opens browser window automatically
    },

@s-molinari I’m just trying to have Quasar use the ports defined in the environment. So when I use a Docker container later on with its own environment in it, say port number and some API keys, I would like Quasar to respect that.

I found the answer here. For anyone interested you should install the app-extension-qenv and then to access the environment variables you can use this advice:

So, no. You cannot access process.env from within quasar.conf.js. However, you can access everything that will be going into process.env – use build.env from within quasar.conf.js. Everything in build.env will be converted to process.env (build-time, vs run-time).

Is that one rendered faster so it can be used in the quasar.conf.js file to set for example a port number as mentioned here?

Currently there is an official extension for using environement variables.

quasar ext add @quasar/dotenv

Figured it out thanks to a member on the team in the discords channel.

You have to select a way how you will be writing your component: Options API, Class or Composition. Examples can be found here…

Same issue here. In the Quasar docs it says to update the Vue components by adding the tag <script lang="ts">.. But even when doing so the import doesn’t work.

routes.ts

const routes = [
  {
    path: '/',
    // component: () => import('../layouts/MainLayout.vue'),
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue'), },
      { path: 'login', component: () => import('pages/Login.vue') },
      { path: 'tickets', component: () => import('pages/Tickets/Index.vue') },
      { path: 'settings', component: () => import('pages/Settings.vue') },
      { path: 'profile', component: () => import('pages/Profile.vue') ,}
    ]
  },
]

// Always leave this as last one
if (process.env.MODE !== 'ssr') {
  routes.push({
    path: '*',
    component: () => import('pages/Error404.vue'),
    children: []
  })
}
export default routes

MainLayout.vue

<template>
  <q-layout view="hHh lpR fFf">
    <app-header />

    <app-SidebarNavigationMenu :links="mainNavigationLinks" />

    <q-page-container>
      <router-view />
    </q-page-container>

    <app-footer :links="mainNavigationLinks" />
  </q-layout>
</template>

<script lang="ts">
import { mapState } from "vuex"

export default {
  computed: {
    ...mapState('navigation', ['mainNavigationLinks'])
  },
  components: {
    appHeader: () => import("components/Header.vue"),
    appFooter: () => import("components/Footer.vue"),
    appSidebarNavigationMenu: () => import("components/SidebarNavigationMenu.vue"),
  },
}
</script>

Rerported error

ERROR in T:/hc-it-portal/frontend/src/router/routes.ts(20,22):
TS2322: Type 'Promise<typeof import("T:/hc-it-portal/frontend/src/pages/Error404.vue")>' is not assignable to type 'Promise<typeof import("T:/hc-it-portal/frontend/src/layouts/MainLayout.vue")>'.
  Type 'typeof import("T:/hc-it-portal/frontend/src/pages/Error404.vue")' is not assignable to type 'typeof import("T:/hc-it-portal/frontend/src/layouts/MainLayout.vue")'.
    Types of property 'default' are incompatible.
      Type '{ name: string; }' is missing the following properties from type '{ computed: { mainNavigationLinks: Computed; }; components: { appHeader: () => Promise<typeof import("T:/hc-it-portal/frontend/src/components/Header.vue")>; appFooter: () => Promise<...>; appSidebarNavigationMenu: () => Promise<...>; }; }': computed, components
Version: typescript 3.8.3
Time: 1656 ms

If anyone found a solution, thank you for sharing it.

They did post it n the docs. The only thing is, it doesn’t work for debugging everything or not for how we would like to use it.

@s-molinari Just a small question on this. In the docs this is mentioned:

Does that mean when you can use the following:

import authPopup from 'src/services/auth/authPopup'

Or does it need to be prefixed like shown in many Webpack config?

import authPopup from '@src/services/auth/authPopup'

Maybe I’m missing something in your code but your class is setting a color for <q-item> and in your example I can’t find <q-item>. So my guess is that you’re not addressing the correct component.

I could be wrong as I’m just a newbie starting with Vue and Quasar. But I still wanted to help you a bit.