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

rstoenescu

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.

flavioafa

Thanks! We waiting for mask support for inputs.

LaurentPayot

I really needed Ionicons v4. Thanks Razvan!

fuxic

Thanks! We are waiting SSR or NUXT.

Hawkeye64

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?

Hawkeye64

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 the pluginssection, 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.

jeffatpf

There’s a deprecation warning when building:

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

Sweetyy

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>

rstoenescu

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

rstoenescu

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

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.
Remember CLI v0.16 uses Webpack 4, so make sure to use the latest version of any webpack plugins that you have added.
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.
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).

rstoenescu

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

rstoenescu

@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",

Hawkeye64

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

rstoenescu

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

Hawkeye64

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

rstoenescu

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

Hawkeye64

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

antoniocdff

@Sweetyy try to remove manifest.json

Sweetyy

@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

antoniocdff

Hi @Sweetyy remove this part of yr template:

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

No More Posting New Topics!

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

Quasar v0.16

Quasar CLI v0.16

Quasar Extras v2.0

vue-cli-plugin-quasar v1.7