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

It’s very easy to align an element with <q-space> in a row.

To align a button to the right you can add the row class to the containing element and simply add <q-space />:

<q-form>
....
  <div class="row">
    <q-space />
    <q-btn label="Submit" type="submit" color="primary" />
  </div>
</q-form>

Depending on where you place <q-space />, it pushes the button to the right, left or (if you use one above and one below the button) to the middle of the row.

Thanks Scott for the helpful link to the docs:

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.