Merge branch 'vue3-work' of github.com:quasarframework/quasar into vu…

…e3-work

docs/src/pages/start/upgrade-guide.md

@@ -114,8 +114,7 @@ Before starting, it is highly suggested to make a copy of your current working p
   # only if you still want to use Stylus (but without Quasar Stylus variables)
   $ yarn add --dev stylus stylus-loader
   ```
-2) **Remove** folders `.quasar`, `node_modules` and `package-lock.json` or `yarn.lock` file. This generally isn't needed, but in some cases it will avoid trouble with yarn/npm upgrading the packages for the purpose of this guide.
-3) **Upgrade** Node to at least v12.22.1, npm to at least v6.14.12 and yarn to at least v1.17.3.
+2) **Upgrade** Node to at least v12.22.1, npm to at least v6.14.12 and yarn to at least v1.17.3.
   ```bash
   # if you are already using a lts/erbium version (eg. 12.14.0), take note of its version, it should be listed at "lts/erbium" row
   $ nvm list
@@ -128,12 +127,14 @@ Before starting, it is highly suggested to make a copy of your current working p
   # uninstall previous "lts/erbium" version, we suppose 12.14.0 was already installed in our case
   nvm uninstall 12.14.0
   ```
-4) **Install**: `quasar` v2 and `@quasar/app` v3 beta packages from the npm tag named "next":
+3) **Remove** folders `.quasar`, `node_modules` and `package-lock.json` or `yarn.lock` file. This generally isn't needed, but in some cases it will avoid trouble with yarn/npm upgrading the packages for the purpose of this guide.
+4) **Install**: `@quasar/app` v3 beta and `quasar` v2 packages from the npm tag named "next":
   ```bash
-  $ yarn add quasar@next
   $ yarn add --dev @quasar/app@next
+  $ yarn add quasar@next
   ```
-5) If you are using ESLint, then edit `/.eslintrc.js`:
+5) **Remove** `.quasar` and `node_modules` folders, and `package-lock.json`/`yarn.lock` file, then run `npm install`/`yarn install` to regenerate the lock file. This forces the upgrade of the whole dependency graph (deep dependencies included) and avoids troubles with mismatching packages, especially webpack 5 related ones.
+6) If you are using ESLint, then edit `/.eslintrc.js`:
   ```js
   // old way
   parserOptions: {
@@ -165,14 +166,14 @@ Before starting, it is highly suggested to make a copy of your current working p
   "eslint-plugin-vue": "^7.0.0",
   "eslint-webpack-plugin": "^2.4.0"
   ```
-6) If you are using Vuex, you will need to manually install it:
+7) If you are using Vuex, you will need to manually install it:
   ```bash
   $ yarn add vuex@4
   # or
   $ npm install vuex@4
   ```
 
-7) Edit quasar.conf.js > framework > lang. It will be explained in the "Quasar language packs" section on this page.
+8) Edit quasar.conf.js > framework > lang. It will be explained in the "Quasar language packs" section on this page.
   ```js
   // old way
   framework: {
@@ -184,9 +185,9 @@ Before starting, it is highly suggested to make a copy of your current working p
     lang: 'en-US'
   }
   ```
-8) Check all your manually installed webpack plugins to be compatible with Webpack 5 (the vast majority should already be compatible). Also update quasar.conf.js > [devServer config](/quasar-cli/quasar-conf-js#property-devserver) to match [webpack-dev-server v4](https://github.com/webpack/webpack-dev-server).
-9) Follow the rest of the guide. You'll need to adapt to the breaking changes of the new versions of Vue 3, Vue Router 4, Vuex 4, Vue-i18n 9 and any other vue plugin that you are using.
-10) Upgrade your other project dependencies (especially ESLint related ones).
+9) Check all your manually installed webpack plugins to be compatible with Webpack 5 (the vast majority should already be compatible). Also update quasar.conf.js > [devServer config](/quasar-cli/quasar-conf-js#property-devserver) to match [webpack-dev-server v4](https://github.com/webpack/webpack-dev-server).
+10) Follow the rest of the guide. You'll need to adapt to the breaking changes of the new versions of Vue 3, Vue Router 4, Vuex 4, Vue-i18n 9 and any other vue plugin that you are using.
+11) Upgrade your other project dependencies (especially ESLint related ones).
 
 #### Option 2: Create a project
 
@@ -206,7 +207,7 @@ In order to support Node 13+ (and for many other benefits) we have **upgraded We
 #### Nodejs polyfills
 Webpack v5 removed the Nodejs polyfills for the web client builds. If you are using packages for the web client that rely on Nodejs API (they shouldn't!), you will get errors saying that some packages are missing. Examples: `Buffer`, `crypto`, `os`, `path`.
 
-These need to be addressed by the package owners. But if you don't want to wait and just want to run your app/website (with a bit of risk), then you can manually install [node-polyfill-webpack-plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin) (yarn add --dev node-polyfill-webpack-plugin) then reference it in quasar.conf.js > build > chainWebpack. Example:
+These need to be addressed by the package owners. But if you don't want to wait and just want to run your app/website (with a bit of risk), then you can manually install [node-polyfill-webpack-plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin) (`yarn add --dev node-polyfill-webpack-plugin`) then reference it in quasar.conf.js > build > chainWebpack. Example:
 
 ```
 // quasar.conf.js
@@ -409,7 +410,22 @@ export { i18n }
 
 If you use TypeScript, remove the existing augmentation of 'vue/types/vue' as it has been integrated into the upstream package.
 If you use TypeScript and ESLint, due to an [upstream types generation problem](https://github.com/intlify/vue-i18n-next/issues/324), `useI18n` composable will generate a "@typescript-eslint/unbound-method" linting warning when used to destructure `t`, `te` and similar methods.
-Until the problem is solved upstream, we recommended to stick to the legacy API when possible or disable that rule every time you use `useI18n`.
+Until the problem is solved upstream, we recommended to create your own `useI18n` helper into the boot file
+
+```js
+export function useI18n() {
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { t, te, d, n, ...globalApi } = i18n.global;
+
+  return {
+    t: t.bind(i18n),
+    d: d.bind(i18n),
+    te: te.bind(i18n),
+    n: n.bind(i18n),
+    ...globalApi,
+  };
+}
+```
 
 ### @vue/composition-api
 
@@ -668,6 +684,8 @@ Renamed the "data" property to "rows" (to solve TS conflict issue with "data" in
 
 New prop: "column-sort-order". New "columns" definition prop ("sortOrder") and now "style" and "classes" can be Functions too.
 
+Due to the new v-model feature of Vue 3, which replaces the ".sync" modifier, `:pagination.sync="..."` now need to be used as `v-model:pagination="..."`
+
 #### QTable/QTree
 
 Due to the new v-model feature of Vue 3, which replaces the ".sync" modifier, the following properties need to be used differently: