fix(quasar-cli-vue3): fixed prod builds (#3208)

* fix(quasar-cli-vue3): fixed prod builds

* fix(quasar-cli-vue3): fixed prod builds

* fix(quasar-cli-vue3-webpack-javascript): updated general README

* fix(quasar-cli-vue3-webpack-javascript): updated READMEs

* fix(quasar-cli-vue3-webpack-javascript): updated READMEs

quasar-cli-vue3-webpack-javascript/README.md

@@ -0,0 +1,74 @@
+# Quasar cli with Javascript
+
+app-exposes: quasar project which exposes components
+
+app-general: quasar project which consume those components 
+
+## Working
+### Step 1
+Run app-exposes project first runs on 3001
+```bash
+cd app-exposes
+yarn
+yarn setup-env:dev
+quasar dev 
+```
+### Step 2
+Then run app-general project on 3002
+```bash
+cd app-general
+yarn
+yarn setup-env:dev
+quasar dev 
+```
+Note: You may change the port number as you wish but make sure the address is correct while adding a remote.
+
+## Explanation
+
+To setup module federation in a quasar project. We need to do 3 things
+
+### Step 1
+
+To solve [Eager consumption error](https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption)
+```javascript
+// In '.quasar' directory, create 'main.js' file and add this line
+import('./client-entry');
+// client-entry.js file is the default entry point in quasar project and we are invoking it from main.js now
+```
+and set the new entry point to `main.js` from `quasar.config.js`
+```javascript
+// in 'quasar.config.js'
+extendWebpack(cfg){
+    cfg.entry = path.resolve(__dirname, './.quasar/main.js')
+}
+```
+This way we are bootstrapping the application.
+
+### Step 2
+Add this link in `quasar.config.js` inside `chainWebpack` function
+```javascript
+ chainWebpack (chain) {
+    // ...
+        chain.optimization.delete('splitChunks');
+      }
+```
+
+### Step 3
+Import the `ModuleFederationPlugin` and initialise inside `extendWebpack`
+```javascript
+ extendWebpack(cfg) {
+        cfg.entry = path.resolve(__dirname, './.quasar/main.js') // from step 1
+        cfg.plugins.push(
+          new ModuleFederationPlugin({
+            name: 'app_remote',
+            filename: 'remoteEntry.js',
+            exposes: {},
+            remotes: {},
+            shared: {
+              ...dependencies,
+            }
+          }),
+        );
+      },
+```
+Now you can start using the plugin!

quasar-cli-vue3-webpack-javascript/app-exposes/.quasar/artifacts.json

@@ -0,0 +1 @@
+{"folders":["C:\\Users\\shark\\OneDrive\\Desktop\\module-federation-examples\\quasar-cli-vue3-webpack-javascript\\exposes\\dist\\spa","C:\\Users\\shark\\OneDrive\\Desktop\\module-federation-examples\\quasar-cli-vue3-webpack-javascript\\app-exposes\\dist\\spa","C:\\Users\\shark\\OneDrive\\Desktop\\module-federation-examples\\quasar-cli-vue3-webpack-javascript\\app-exposes\\dist\\pwa"]}

quasar-cli-vue3-webpack-javascript/app-exposes/.quasar/client-entry.js

@@ -0,0 +1,87 @@
+/**
+ * THIS FILE IS GENERATED AUTOMATICALLY.
+ * DO NOT EDIT.
+ *
+ * You are probably looking on adding startup/initialization code.
+ * Use "quasar new boot <name>" and add it there.
+ * One boot file per concern. Then reference the file(s) in quasar.config.js > boot:
+ * boot: ['file', ...] // do not add ".js" extension to it.
+ *
+ * Boot files are your "main.js"
+ **/
+
+
+import { createApp } from 'vue'
+
+
+
+
+
+
+
+import '@quasar/extras/roboto-font/roboto-font.css'
+
+import '@quasar/extras/material-icons/material-icons.css'
+
+
+
+
+// We load Quasar stylesheet file
+import 'quasar/dist/quasar.sass'
+
+
+
+
+import 'src/css/app.scss'
+
+
+import createQuasarApp from './app.js'
+import quasarUserOptions from './quasar-user-options.js'
+
+
+
+
+
+
+console.info('[Quasar] Running SPA.')
+
+
+
+
+
+const publicPath = `http://localhost:3001/`
+
+const doubleSlashRE = /\/\//
+const addPublicPath = url => (publicPath + url).replace(doubleSlashRE, '/')
+
+
+async function start ({
+  app,
+  router
+
+}) {
+
+
+
+
+  app.use(router)
+
+
+
+
+
+
+
+      app.mount('#q-app')
+
+
+
+
+
+
+}
+
+createQuasarApp(createApp, quasarUserOptions)
+
+  .then(start)
+

quasar-cli-vue3-webpack-javascript/app-exposes/README.md

@@ -0,0 +1,45 @@
+# Quasar App (app-exposes)
+
+A Quasar Project
+
+## Install the dependencies
+```bash
+yarn
+# or
+npm install
+```
+
+### Start the app in development mode (hot-code reloading, error reporting, etc.)
+```bash
+yarn setup-env:dev
+quasar dev
+```
+
+
+### Lint the files
+```bash
+yarn lint
+# or
+npm run lint
+```
+
+
+### Format the files
+```bash
+yarn format
+# or
+npm run format
+```
+
+
+
+### Build the app for production
+```bash
+yarn setup-env:prod
+quasar build
+cd dist/spa
+quasar serve -p 3001
+```
+
+### Customize the configuration
+See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js).

quasar-cli-vue3-webpack-javascript/app-exposes/envs/env.dev.json

@@ -0,0 +1,3 @@
+{
+  "publicPath": "/"
+}

quasar-cli-vue3-webpack-javascript/app-exposes/envs/env.json

@@ -0,0 +1,3 @@
+{
+  "publicPath": "http://localhost:3001/"
+}

quasar-cli-vue3-webpack-javascript/app-exposes/envs/env.prod.json

@@ -0,0 +1,3 @@
+{
+  "publicPath": "http://localhost:3001/"
+}

quasar-cli-vue3-webpack-javascript/app-exposes/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "app-exposes",
+  "version": "0.0.1",
+  "description": "A Quasar Project",
+  "productName": "Quasar App",
+  "author": "kama7 <[email protected]>",
+  "private": true,
+  "scripts": {
+    "lint": "eslint --ext .js,.vue ./",
+    "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
+    "test": "echo \"No test specified\" && exit 0",
+    "setup-env:dev": "shx cp -r envs/env.dev.json envs/env.json",
+    "setup-env:prod": "shx cp -r envs/env.prod.json envs/env.json"
+  },
+  "dependencies": {
+    "@quasar/extras": "^1.0.0",
+    "core-js": "^3.6.5",
+    "quasar": "^2.6.0",
+    "vue": "^3.0.0",
+    "shx": "0.3.3",
+    "vue-router": "^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "7.21.3",
+    "@quasar/app-webpack": "3.7.2",
+    "eslint": "8.26.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-vue": "9.6.0",
+    "eslint-webpack-plugin": "3.2.0",
+    "prettier": "2.8.8",
+    "workbox-webpack-plugin": "^6.0.0"
+  },
+  "browserslist": [
+    "last 10 Chrome versions",
+    "last 10 Firefox versions",
+    "last 4 Edge versions",
+    "last 7 Safari versions",
+    "last 8 Android versions",
+    "last 8 ChromeAndroid versions",
+    "last 8 FirefoxAndroid versions",
+    "last 10 iOS versions",
+    "last 5 Opera versions"
+  ],
+  "engines": {
+    "node": ">= 12.22.1",
+    "npm": ">= 6.13.4",
+    "yarn": ">= 1.21.1"
+  }
+}