@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.

Best posts made by DarkLite1
-
RE: Add vuex-map-fields to Quasar
-
RE: Detect screen size (xs, sm, md, etc) via javascript?
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.
-
RE: Environment variables
Currently there is an official extension for using environement variables.
quasar ext add @quasar/dotenv
-
RE: Access files in the root with simple method
@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'
-
RE: Environment variables
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 },
Latest posts made by DarkLite1
-
RE: Environment variables
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 },
-
RE: Environment variables
@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.
-
RE: Environment variables
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 withinquasar.conf.js
. However, you can access everything that will be going intoprocess.env
– usebuild.env
from withinquasar.conf.js
. Everything inbuild.env
will be converted toprocess.env
(build-time, vs run-time). -
RE: Environment variables
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? -
RE: Environment variables
Currently there is an official extension for using environement variables.
quasar ext add @quasar/dotenv
-
RE: Quasar + Vetur + TypeScript
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…
-
RE: Quasar + Vetur + TypeScript
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 theimport
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.
-
RE: How to debug Quasar Electron App with VS Code?
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.
-
RE: Access files in the root with simple method
@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'
-
RE: Changing active class color in dropdown list
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.