Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. DarkLite1
    • Profile
    • Following 0
    • Followers 0
    • Topics 5
    • Posts 47
    • Best 5
    • Groups 0

    DarkLite1

    @DarkLite1

    7
    Reputation
    9
    Profile views
    47
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    DarkLite1 Follow

    Best posts made by DarkLite1

    • RE: Add vuex-map-fields to Quasar

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

      posted in Help
      DarkLite1
      DarkLite1
    • 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.

      posted in Framework
      DarkLite1
      DarkLite1
    • RE: Environment variables

      Currently there is an official extension for using environement variables.

      quasar ext add @quasar/dotenv
      
      posted in CLI
      DarkLite1
      DarkLite1
    • RE: Access files in the root with simple method

      @s-molinari Just a small question on this. In the docs this is mentioned:
      f00a2b7d-d675-47b2-9856-054e391b72f5-image.png

      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'
      
      posted in Framework
      DarkLite1
      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
          },
      
      posted in CLI
      DarkLite1
      DarkLite1

    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
          },
      
      posted in CLI
      DarkLite1
      DarkLite1
    • 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.

      posted in CLI
      DarkLite1
      DarkLite1
    • 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 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).

      posted in CLI
      DarkLite1
      DarkLite1
    • 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?

      posted in CLI
      DarkLite1
      DarkLite1
    • RE: Environment variables

      Currently there is an official extension for using environement variables.

      quasar ext add @quasar/dotenv
      
      posted in CLI
      DarkLite1
      DarkLite1
    • 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…

      posted in Help
      DarkLite1
      DarkLite1
    • 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 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.

      posted in Help
      DarkLite1
      DarkLite1
    • 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.

      posted in Help
      DarkLite1
      DarkLite1
    • RE: Access files in the root with simple method

      @s-molinari Just a small question on this. In the docs this is mentioned:
      f00a2b7d-d675-47b2-9856-054e391b72f5-image.png

      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'
      
      posted in Framework
      DarkLite1
      DarkLite1
    • 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.

      posted in Help
      DarkLite1
      DarkLite1