[v1] Quasar v1.0.0-beta.12/13 released! Don't miss it.

  • Admin

    Update: [v1] Released Quasar v1.0.0-beta.13 – with small regression fix on QInput in beta.12

    Biggest news: you can now use images (svg, png, jpg, …) as icons too! Check out the QIcon documentation page to see how to use it. Works on any Quasar component with icon-related props!

    Thanks to @webstudio (one of our Patrons) who requested and sponsored us for bringing QCarousel fullscreen mode faster.


    • feat(QIcon): Image icons support (including SVG) #2494
    • feat(QCarousel): fullscreen mode
    • feat(QInput/QSelect): [v1 request] bring back clearable prop for QInput/QSelect #3503
    • feat(quasar): Add onDismiss handler for QBottomSheet and QDialogPlugin, fix double cancel call (#3631)
    • feat(QFabActions): new props - “to” and “replace”
    • feat(QRating): new prop (“no-reset”), doc examples with image icons
    • feat(quasar): Improve QSelect menu and filter abort handling (#3648)
    • feat(quasar): Improve transitions - using easeOutCubic
    • feat(quasar): Add separator slot in QSplitter (#3654)
    • feat(quasar): QField - add custom control slot, unify focus/blur and add checks (#3653)


    • fix(quasar): Adjustments for QSlider and QRange pin label background (#3612)
    • fix(lang): Applied some corrections to the dutch translation. (#3616)
    • fix(QInput/QSelect): [v1 bug] Placeholder shows up only on focus when using input with stack-label, should be always visible #3614
    • fix(quasar): Guard VTouch… for missing ctx.event (#3619)
    • fix(quasar): Stop propagation of touchstart on local menu in QSelect (#3618)
    • fix(quasar): Fix QSelect corner case when value is null, map-options is set and there is an option with value null (#3617)
    • fix(quasar): Prevent text selection on dbl click on QToggle’s knob (#3628)
    • fix(api): Fix “bottom center” should be “bottom middle” (#3633)
    • fix(api): QMenu/QTooltip anchor/self prop values #3633
    • fix(api): QTooltip “self” description
    • fix(quasar): [v1] QDate - years gets fighting for a place when $flex-cols is custom (#3629)
    • fix(QItem): [v1] QItem: Maximum call stack size exceeded error when enabling a component #3639
    • fix(iconSet): themify italic icon name
    • enhancement(QExpansionItem): Remove default overflow-hidden
    • fix(QDate): default view with null model in Persian calendar (#3649)
    • fix(quasar): Redo the selection logic for QRouteTab (#3642)
    • fix(QTree): A QTree’s node children aren’t observable when using lazy loading #3650
    • fix(quasar): Check if event is cancelable before preventDefault (#3651)

  • These are great updates!

  • They’re m-m-m-monster kill!

  • Awesome… images as icons really cool feature!! great as usual 🙂
    One suggestion regarding QInput & QSelect. I hope to extract the autocomplete feature out to be independent plugin. so it can be used for both QInput or QSelect

  • Admin

    @amer1616 That would be duplicating the Autocomplete feature. QSelect can handle your case as if it’s a QInput. Check docs 😉

  • @rstoenescu Thank u. I’ve already used it for that but it needs some workarounds😉. By the way, have u noticed that if use img svg in QIcon, the color prop not working anymore. u have to style svg either in svg file or in css?!!

  • Admin

    @amer1616 If you feel you need to use workarounds, it means u haven’t fully grasped it yet. It’s natural that the color prop for QIcon with svg doesn’t works. You’re displaying an image, not a webfont, and Quasar can’t tamper with the image 😉

  • Nice, SVGeeee!

  • In going back to use the clearable prop instead of:

    <template v-slot:append>
       <q-icon v-if="searchTerms === ''" name="search" />
       <q-icon v-else name="clear" class="cursor-pointer" @click="searchTerms = ''" />

    The search icon gets removed if I leave just that portion in combination with the clearable prop, I wondered if perhaps the clearable prop might also work as a string for an icon to use when cleared or a boolean if no icon. Thoughts?

  • @smakinson I guess you can bind clearable prop using :clearable="searchTerms !== ''" and still use the append slot (however i don’t know why your code is not working, maybe post a codepen)

  • @smakinson When the clear button is pressed, the model value is updated to null, so your v-if on search icon is incorrect, it should be v-if="!searchTerm" for example

  • how to upgrade to this? when i issue quasar upgrade --install my version still says Pkg quasar........ v1.0.0-beta.9 & Pkg @quasar/app... v1.0.0-beta.10. thx

  • On npm I think it’s npm update

  • @lucasfernog Ah, ya missed that bit, so I guess that will be the best way to go moving forward. Thanks for catching that.

  • @metalsadman really I tried many times to upgrade quasar package withquasar upgrade --install . but nothing changed. so I do it either by yarn upgrade or npm update

  • Admin


    • Are you running @quasar/cli v1.0.0-beta.3 (the global installation)
    • Are you getting any errors when running “quasar upgrade”? What’s the output in your terminal?
    • What OS are you using?

    “quasar upgrade -i” simply runs the yarn install / npm install command with the latest Quasar package versions available. How could it not change anything in your project folder?

  • @rstoenescu yes im running the latest quasar-cli 3 globally. Actually there is no error i see. Only I get info that all quasar package is up-to-date. There is no yarn process executed at that time. Im running Windows 10 with the latest yarn & npm. I didnt change anything in project folder.

  • Admin

    @amer1616 Copy paste the terminal output of “quasar upgrade -i” here, and also your package.json.

  • Admin

    Also, copy paste the output of “quasar info”.

Log in to reply