Quasar v0.16 & CLI v0.16 are out!


  • Admin

    We are happy to announce new releases for Quasar packages.
    I you enjoy the productivity of your work using Quasar, please consider becoming a backer if you aren’t already (https://www.patreon.com/quasarframework). It makes sense, since this helps us grow Quasar and it ensures your Quasar projects will receive the enhancements & bug fixes they require.
    Enjoy the new release!

    The difference between Quasar v0.15.x and v0.16 is minimal. No big breaking changes as you can see below. The only reason for bumping Quasar’s version is to maintain consistency (same major + minor version) with Quasar CLI (which got an important update: webpack 4, babel 7, Workbox, electron-builder support, ionicons v4 and many more).

    Upgrading from v0.15.x should be seamless if you are using Quasar CLI – which will guide you to do some minor changes to your project folder. Note that Ionicons v4 has breaking changes, so if you are using it in your project, then you need to update each such icon to its new name.

    Quasar v0.16

    Breaking Changes

    • QIcon: removed “mat” & “ios” props for performance reasons (use :name="$q.theme === 'mat' ? val : otherVal" instead)
    • Removed utils > dom > viewport() method (use window.innerHeight/innerWidth instead)
    • Updated Quasar ionicons set to Ionicons v4 – compatible with quasar-extras@2.0

    New

    • [Request] QBtn router handling (“to” and “replace” props) #2058
    • Improved perf for utils > event by removing legacy IE < 11 code
    • QFab “icon” prop is now optional

    Fixes

    • LayoutDrawer mini mode: still animating when hidden #2059

    Quasar CLI v0.16

    Your website/app will build much faster!

    Dependency updates

    • Quasar v0.16.0
    • Webpack v4 (instead of v3)
    • vue-loader v15
    • Babel v7 (instead of v6)
    • Workbox (instead of sw-precache-plugin)
    • electron-builder support
    • quasar-extras v2 (instead of v1)

    Other changes

    • Greatly improved rebuild time: babel caches compiled assets; tweaked UglifyJs config to slightly build faster and also take care of iOS quirks
    • Use developer’s preferred node package manager (Yarn/NPM - Yarn is preferred) instead of always relying on NPM
    • Removed node-notifier since it was hogging memory in some scenarios and it couldn’t be fixed
    • Closing the electron window when developing makes Quasar CLI exit (as it should)
    • Wrote some webpack plugins in order to simplify src/index.template.html (a lot of tags are no longer necessary; the html file is very simple now)
    • Prevent webpack from injecting useless polyfills (like setImmediate from vue source code) and mocks to Node native modules (like “fs”, “net”, …)

    Quasar Extras v2.0

    Package Changes Version Description
    Roboto Font Updated CDN v18 Default recommended font when building with Material theme
    Material Icons Updated CDN v37 Material icons font
    MDI (Material Design Icons) Updated 2.3.54 Extended Material Design icons font
    Font Awesome Updated 5.0.13 Fontawesome icons font
    Ionicons Updated (breaking changes) 4.1.1 Ionicons font
    Animate.css 3.5.2 Bundle of animations you can use in your website/app

    vue-cli-plugin-quasar v1.7

    Upgrade to using Quasar v0.16 instead of v0.15.



  • Thanks! We waiting for mask support for inputs.



  • I really needed Ionicons v4. Thanks Razvan!



  • Thanks! We are waiting SSR or NUXT.



  • I did all the updates the quasar-cli asked for in order to do the upgrade. Got this:

     ERROR  Failed to compile with 1 errors                                                                                                                                            09:39:31
    
     error  in ./.quasar/entry.js
    
    Module build failed:   Error: Cannot find module '@babel/plugin-transform-runtime' from '/home/intelliview/git/projects/NewCode/System_Console/Sources/Client'
    

    I did npm i --save babel-plugin-transform-runtime then quasar dev and still get the same error. Did npm r -g quasar-cli followed by npm i -g quasar-cli@latest and still get the same error. 😞
    A bit stuck with not knowing how to get past this. Any suggestions from anyone?



  • Looks like running quasar dev changes your .babelrc file.
    I previously had this:

    { 
      "presets": [ 
        [ "env", {"modules": false} ], 
        "stage-2" 
      ], 
      "plugins": ["transform-runtime"], 
      "comments": false 
    } 
    

    Running quasar dev changes it to this:

    {
      "presets": [
        [
          "@babel/preset-env", {
            "modules": false,
            "loose": false,
            "useBuiltIns": "usage"
          }
        ],
        [
          "@babel/preset-stage-2", {
            "modules": false,
            "loose": false,
            "useBuiltIns": true,
            "decoratorsLegacy": true
          }
        ]
      ],
      "plugins": [
        [
          "@babel/transform-runtime", {
            "polyfill": false,
            "regenerator": false
          }
        ]
      ],
      "comments": false
    }
    

    The recomended way to use these, from the site itself (https://www.npmjs.com/package/babel-plugin-transform-runtime):

    Usage
    Via .babelrc (Recommended)
    Add the following line to your .babelrc file:
    
    // without options
    {
      "plugins": ["transform-runtime"]
    }
     
    // with options
    {
      "plugins": [
        ["transform-runtime", {
          "helpers": false, // defaults to true
          "polyfill": false, // defaults to true
          "regenerator": true, // defaults to true
          "moduleName": "babel-runtime" // defaults to "babel-runtime"
        }]
      ]
    }
    

    The name of the plugin is transform-runtime' as it is under thepluginssection, theplugin-transform-runtimeis not needed, as it is implied. I've tried to fix this, but when you runquasar devit puts it back. Same withpreset-envandpreset-stage-2` the preset is implied and not needed. Babel works it out.



  • There’s a deprecation warning when building:

    (node:16087) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead



  • Hi !

    I got an issue… When i run quasar dev it tells me to remove some section in the index.template.html that are no longer required by the new version of quasar-cli. I did it but it continues to ask me to remove this part and i already did it :

    Your newer Quasar CLI requires a minor change to /src/index.template.html
       Please remove this section completely:
    
       <% if (htmlWebpackPlugin.options.ctx.mode.pwa) { %>
        <!-- Add to home screen for Android and modern mobile browsers -->
        .....
       <% } %>
    

    Here is my index.template.html :

    <!DOCTYPE html>
    <html <% if (htmlWebpackPlugin.options.rtl) { %>dir="rtl" <% } %>lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
        <title>MyApp</title>
    
        <link rel="apple-touch-icon" sizes="60x60" href="statics/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="statics/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="statics/favicon-16x16.png">
        <link rel="manifest" href="statics/manifest.json">
        <link rel="mask-icon" href="statics/safari-pinned-tab.svg" color="#5bbad5">
        <meta name="theme-color" content="#ffffff">
        <style>
          /* Only for IE10 & IE11 if not running */
          @media all and (-ms-high-contrast:none)
          {
            .warning-ie {
              font-family: sans-serif;
              margin-top: 10vh;
              text-align: center; 
              color: green;
              display: block !important;
            } /* IE10 */
            *::-ms-backdrop, .warning-ie {
              font-family: sans-serif;
              margin-top: 10vh;
              text-align: center; 
              color: red;
              display: block !important;
            } /* IE11 */
          }
        </style>
      </head>
      <body>
        <% if (!htmlWebpackPlugin.options.ctx.mode.electron) { %>
          <noscript>
            This is your fallback content in case JavaScript fails to load.
          </noscript>
        <% } %>
    
        <!-- DO NOT touch the following <div> -->
        <div id="q-app"></div>
    
        <!-- built files will be auto injected here -->
      </body>
    </html>
    

  • Admin

    @fuxic SSR is finally under works as we speak. Good progress too.


  • Admin

    @hawkeye64 said in Quasar v0.16 & CLI v0.16 are out!:

    1. You shouldn’t be required to install babel transform plugins. And they should definitely not appear in your package.json. It’s already in the CLI. Other than the linting packages, you should not have any babel related packages there.
    2. Remember CLI v0.16 uses Webpack 4, so make sure to use the latest version of any webpack plugins that you have added.
    3. If the CLI detects the old babel 6 .babelrc syntax, then it replaces the file with an updated one. If you wanna change it, change the modified file AND make sure it’s babel 7 compliant.
    4. If you got past the previous points and it still doesn’t works, delete node_modules and yarn.lock/package-lock.json and yarn/npm install again. But very important, don’t try to install babel stuff in your project (other than babel-eslint if you’re using the linter).

  • Admin

    @sweetyy Make sure you are editing the right src/index.template.html file. It is guaranteed that the CLI doesn’t complain for nothing.


  • Admin

    @jeffatef Remember that CLI v0.16 is using Webpack 4, so all your webpack plugins must be webpack 4 – usually all it takes it to upgrade to their latest version.
    A common mistake when using a linter is to not update your package.json dev dependencies like babel-eslint.

    The correct list of package versions (minimum versions to be correct):

    "babel-eslint": "^8.2.2",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^11.0.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    


  • @rstoenescu Quick question for you. I noticed we have “quasar-cli”: “^0.15.20” in our package.json under “devDependencies”. Is this supposed to be there? I have a feeling not. I didn’t put it there. I suspect another team member did.


  • Admin

    @hawkeye64 it needs to be there. It’s added when quasar init-ing.



  • @rstoenescu Can you post what the .babelrc file should look like for quasar 0.16.1?

    I removed babel-plugin-transform-runtime using npm from the package.json devDependencies.
    I get this error on quasar dev:

     ERROR  Failed to compile with 1 errors                                                                                                                                                              07:34:09
    
     error  in ./.quasar/entry.js
    
    Module build failed:   Error: Cannot find module '@babel/plugin-transform-runtime' from '/home/intelliview/git/projects/NewCode/System_Console/Sources/Client'
    

  • Admin

    @hawkeye64 Example of package.json > devDependencies for 0.16:

    "devDependencies": {
        "babel-eslint": "^8.2.2",
        "eslint": "^4.15.0",
        "eslint-config-standard": "^11.0.0",
        "eslint-friendly-formatter": "^3.0.0",
        "eslint-loader": "^2.0.0",
        "eslint-plugin-import": "^2.7.0",
        "eslint-plugin-node": "^6.0.1",
        "eslint-plugin-promise": "^3.7.0",
        "eslint-plugin-standard": "^3.0.1",
        "eslint-plugin-vue": "^4.0.0",
        "quasar-cli": "^0.16.1"
      },
    

    To be sure you’ve installed everything correctly (my feeling is that you missed something), delete node_modules and yarn.lock/package-json.lock then yarn/npm install again.



  • @rstoenescu Thank you so much for posting the devdependencies! I removed the node_modules and updated package.json with the versions you have, did npm install then quasar dev and it worked wonderfully! Thanks again!



  • @Sweetyy try to remove manifest.json 🙂



  • @antoniocdff thank you i tried but now i get that (after i removed all my node_modules with lock and npm install) :

    Error: Error: Cannot find module 'webpack'
    
        - module.js:11 require
          internal/module.js:11:18
    
        - index.js:3 Object.<anonymous>
          [myproject]/[progress-bar-webpack-plugin]/index.js:3:15
    

    I’m a bit annoyed because it’s the first time i get so many issues to update … 😕

    Thanks in advance for helps guys 🙂



  • Hi @Sweetyy remove this part of yr template:

    <link rel="manifest" href="statics/manifest.json">