Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Popular
    Log in to post
    • All categories
    • Announcements
    • Framework
    • CLI
    • [v1] App Extensions
    • Starter Kits
    • Help
    • Show & Tell
    • Quasar Play App
    • Hangout
    • Useful Tips (NEW)
    • Jobs
    • All Topics
    • New Topics
    • Watched Topics
    • Unreplied Topics
    • All Time
    • Day
    • Week
    • Month
    • P

      Problem with creating new project , dev not running
      Help • • pospi

      17
      0
      Votes
      17
      Posts
      53
      Views

      P

      In meantime i google this issue : https://github.com/quasarframework/quasar/issues/4835
      but no solution from this thread worked for me
      so im sure that it’s not definitely network problem . it is problem with packages

    • P

      Q-Uploader with Composition API
      Framework • • pazarbasifatih

      16
      0
      Votes
      16
      Posts
      41
      Views

      P

      @rstoenescu Great! I tried running reset() method in the MyUploader.js but I am probably doing something wrong because, it’s giving me ReferenceError: reset is not defined at eval error.

      So I tried creating my own function reset() inside the MyUploader.js but it has the infamous uploadSize.value in the original example, which is not inside const state, so I can’t use the helpers object for reaching it.

      function reset () { if (props.disable === false) { state.abort() state.uploadedSize.value = 0 uploadSize.value = 0 revokeImgURLs() state.files.value = [] state.queuedFiles.value = [] state.uploadedFiles.value = [] } }

      I’m sure there must be a proper way of calling that function but I lack the knowledge.

      Sorry to bother for this, but I’ve got kind of obsessed with it now. Wouldn’t putting uploadSize inside the const state = {uploadSize: ref(0)} in the uploader-core be a little bit more flexible?

    • J

      How to use CopyWebPackPlugin in Quasar
      Framework • • jmriyaz84

      13
      0
      Votes
      13
      Posts
      55
      Views

      S

      @jmriyaz84 Hello, Is it your own fonts or quasar’s?

    • B

      [solved] How to go back to Quasar v1
      Help • • beatscribe

      11
      0
      Votes
      11
      Posts
      32
      Views

      B

      Thanks. Going to javascript and Quasar v1 has been fine in ie11 so far.

    • larskuerten

      Button blink/flash/flick when click another button
      Help • • larskuerten

      8
      0
      Votes
      8
      Posts
      27
      Views

      larskuerten

      Thank you suleiman, probably a browser related small issue.

    • P

      Another VueX State Question (Ithought I knew how it worked)
      Help • • pwfraley

      8
      0
      Votes
      8
      Posts
      22
      Views

      P

      @dobbel
      I actually integrated it in my application and in my first tests it seems to work fine. It did not directly fix my problem (which seems like what I was trying to do is a vue anti pattern). I still do have some quirky side effects, but I am also just learning vue. Thank you for that awesome tip to vue-orm 🙂

    • B

      [solved] QDate/QInput - Close on Selection
      Help • • beatscribe

      7
      0
      Votes
      7
      Posts
      17
      Views

      T

      enjoying your post! I used to be more than happy to seek out this internet-site.I wanted to thanks in your time for this glorious read!! I positively enjoying each little bit of it and I have you bookmarked to check out new stuff you weblog post. Allfreedumps

    • A

      Q-input with comma as decimal separator
      Help • • Adagio

      6
      0
      Votes
      6
      Posts
      27
      Views

      M

      @Adagio - wow, that v-money Codepen looks pretty powerful. I have similar headaches with decimal numbers - though in my app those are not currencies, but geometrical heights.

      But I still have to digest how I could make use of this v-money stuff. At a first glance, the code looks very different from my current code, as I don’t even see q-input fields in the Codepen. It wraps a native HTML input field (v-money directive) or a new component (v-money component) within a q-field, rather than using a q-input as usual for data entry. I never used q-field, but at a first glance it seems to have the same or nearly the same props a q-input, so the conversion is hopefully not too difficult.

      What worries me a bit playing with that Codepen for v-money is this “right to left” data entry (same as “reverse fill mask” in Quasar). That could be found unusual by users. used to normal Quasar q-inputs without reverse fill mask. Do you know whether it can be changed?

    • J

      For navigation, how to get selected row index in q-table
      Framework • • jove4015

      6
      -1
      Votes
      6
      Posts
      27
      Views

      J

      That index doesn’t help me - when someone sorts the data in a different direction or types into the search box to add a filter, the “data” array stays the same but the order of rows changes. I need the current row index in the UI, not the data set.

    • R

      Help with .quasar.env.json in Jest
      Help • • rafaelst2000

      6
      0
      Votes
      6
      Posts
      11
      Views

      B

      Ah…You are trying to do environment variables.

      You need this extension: https://www.npmjs.com/package/@quasar/quasar-app-extension-qenv

      You’ll make a separate .quasar.env.json.

    • T

      Securing google map API, in cordova and web
      Help • • technowebs

      6
      0
      Votes
      6
      Posts
      20
      Views

      T

      @dobbel Thanks I will try it, and check if it solves the security issue.

      My current plugin working fine in Android too when I remove the restriction (SHA1) from the API console. May be Cordova specific plugin solve the issue. I will test and update

      Thanks

    • Z

      volatile size form
      Help • • zeppelinexpress

      6
      0
      Votes
      6
      Posts
      23
      Views

      Z

      thanks, I did in an ugly way, but at least it’s working

    • J

      Best way for implement Vuex with Typescript
      Framework • • jhon

      5
      0
      Votes
      5
      Posts
      36
      Views

      D

      Hello,
      TypeScript Support
      Vuex provides its typings so you can use TypeScript to write a store definition. You don’t need any special TypeScript configuration for Vuex. Please follow Vue’s basic TypeScript setup to configure your project.

      However, if you’re writing your Vue components in TypeScript, there’re a few steps to follow that require for you to correctly provide typings for a store.

      #Typing $store Property in Vue Component
      Vuex doesn’t provide typings for this.$store property out of the box. When used with TypeScript, you must declare your own module augmentation.

      To do so, declare custom typings for Vue’s ComponentCustomProperties by adding a declaration file in your project folder:

      // vuex.d.ts
      import { ComponentCustomProperties } from ‘vue’
      import { Store } from ‘vuex’

      declare module ‘@vue/runtime-core’ {
      // declare your own store states
      interface State {
      count: number
      }

      // provide typings for this.$store
      interface ComponentCustomProperties {
      $store: Store<State>
      }
      }
      #Typing useStore Composition Function
      When you’re writing your Vue component in Composition API, you will most likely want useStore to return the typed store. For useStore to correctly return the typed store, you must:

      Define the typed InjectionKey.
      Provide the typed InjectionKey when installing a store to the Vue app.
      Pass the typed InjectionKey to the useStore method.
      Let’s tackle this step by step. First, define the key using Vue’s InjectionKey interface along with your own store typing definition:

      // store.ts
      import { InjectionKey } from ‘vue’
      import { createStore, Store } from ‘vuex’

      // define your typings for the store state
      export interface State {
      count: number
      }

      // define injection key
      export const key: InjectionKey<Store<State>> = Symbol()

      export const store = createStore<State>({
      state: {
      count: 0
      }
      })
      Next, pass the defined injection key when installing the store to the Vue app:

      // main.ts
      import { createApp } from ‘vue’
      import { store, key } from ‘./store’

      const app = createApp({ … })

      // pass the injection key
      app.use(store, key)

      app.mount(’#app’)
      Finally, you can pass the key to the useStore method to retrieve the typed store.

      // in a vue component
      import { useStore } from ‘vuex’
      import { key } from ‘./store’

      export default {
      setup () {
      const store = useStore(key)

      store.state.count // typed as number

      }
      }
      Under the hood, Vuex installs the store to the Vue app using Vue’s Provide/Inject feature which is why the injection key is an important factor.

      #Simplifying useStore usage
      Having to import InjectionKey and passing it to useStore everywhere it’s used can quickly become a repetitive task. To simplify matters, you can define your own composable function to retrieve a typed store:

      // store.ts
      import { InjectionKey } from ‘vue’
      import { createStore, useStore as baseUseStore, Store } from ‘vuex’

      export interface State {
      count: number
      }

      export const key: InjectionKey<Store<State>> = Symbol()

      export const store = createStore<State>({
      state: {
      count: 0
      }
      })

      // define your own useStore composition function
      export function useStore () {
      return baseUseStore(key)
      }
      Now, by importing your own composable function, you can retrieve the typed store without having to provide the injection key and it’s typing:

      // in a vue component
      import { useStore } from ‘./store’

      export default {
      setup () {
      const store = useStore()

      store.state.count // typed as number

      }
      }

    • B

      [solved] Add a QTooltip to an option in a QOptionGroup
      Help • • beatscribe

      5
      0
      Votes
      5
      Posts
      24
      Views

      B

      II was able to just use Q-radio’s and ditch getting it with data via v-for, its a totally static 2 option thing that’ll probably never change, so just putting it in the HTML doesn’t seem too terrible.

    • S

      Tip: PurgeCSS works perfectly with Quasar
      Useful Tips (NEW) • • suleiman_as

      4
      2
      Votes
      4
      Posts
      33
      Views

      dobbel

      @suleiman_as

      I would just add it to the safelist.

      Yes that works. Not ideal but finally some reduced css size for Quasar apps. Good work!

    • K

      How to remove ripple effect on q-stepper?
      Help • • kero

      4
      0
      Votes
      4
      Posts
      16
      Views

      metalsadman

      @kero so you want it to be still clicked even when it’s active? then try to override the :before and :after css, inspect the element.

    • B

      [solved] How to make flexboxes in Quasar
      Help • • beatscribe

      4
      0
      Votes
      4
      Posts
      17
      Views

      s.molinari

      No problem and your welcome. It’s hopefully understandable what I did, but to be clear, you can add the break points into the flexbox css in Quasar. xs, sm, md, xl, etc. That gives you the ability to “break point” how elements should react to different screen sizes (for a lack of a better way to say it).

      Hope that makes sense. More about it here and when the points “break” (what pixel size): https://next.quasar.dev/style/breakpoints#introduction

      If you need more programmatic control, there is the screen plugin: https://next.quasar.dev/options/screen-plugin

      Scott

    • O

      Navigation To Bookmark On Next Page
      Framework • • omgwalt

      4
      0
      Votes
      4
      Posts
      12
      Views

      T

      very good idea

    • M

      Question: Difference between "disable" and "readonly" in form components?
      Help • • Mickey58

      4
      0
      Votes
      4
      Posts
      17
      Views

      M

      @suleiman_as , @walfin - thanks, that’s not explained in the docs. I may open a doc PR for it.

    • J

      q-dialog accidental 'enter' key press issue
      Framework • q-dialog • • jitendra16

      4
      0
      Votes
      4
      Posts
      19
      Views

      J

      @s-molinari Can we set autofocus to ‘cancel’ instead of ‘ok’ so that accidental ‘enter’ keypress event can be treated as cancelled.