No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

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

    DarkLite1

    @DarkLite1

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

    DarkLite1 Follow

    Best posts made by 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: 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: 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: 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

      Currently there is an official extension for using environement variables.

      quasar ext add @quasar/dotenv
      
      posted in CLI
      DarkLite1
      DarkLite1
    • RE: How to align buttons to left and right inside toolbar ?

      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:

      posted in Framework
      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