@RishitKedia Can you go into any more details about how to go about getting started making a chrome extension that uses quasar?
Or do you think you could possibly make a starter kit by removing all of the functionality from tabtation and just give us the basic setup for quasar?
I’d really like to use quasar in my chrome extension but I am having a really hard time getting started.
I agree with your desire to end his Tyranny, though part of me secretly thinks I should just give into it.
Anyway, if you want to learn more about what the rules are (or can be set to), I found Airbnb’s Javascript guide to be very helpful. Each rule shows which eslint setting are related to it. https://github.com/airbnb/javascript
I’m having the same problem, but on windows. I confirmed that the android skd tools and platform tools are added to path and I created environment variables that go to the SDK root like it says in the capacitor getting started and in the developer link posted by @dobbel.
When I run the “quasar dev -m capacitor -T android” command, it only opens the windows explorer to the path. It does not open Android Studio.
Dev mode… capacitor
Pkg quasar… v1.12.8
Pkg @quasar/app… v2.0.8
Debugging… enabled
Running mode… IDE (manual)
Configured browser support (at least 86.16% of global marketshare):
· Chrome for Android >= 84
· Firefox for Android >= 68
· Android >= 81
· Chrome >= 75
· Edge >= 80
· Firefox >= 71
· iOS >= 10.0-10.2
· Opera >= 65
· Safari >= 10.1
App · Reading quasar.conf.js
App · 
️ Detected external IP 192.168.1.74 and using it
App · Checking listening address availability (192.168.1.74:8080)…
App · Transpiling JS (Babel active)
App · Extending Capacitor Webpack config
App · Generating Webpack entry point
App · Booting up…
• Compiling:
└── Capacitor ████████████████████ 100% done in 8768 ms
DONE Compiled successfully in 8772ms 7:35:13 AM
i ｢wds｣: Project is running at http://192.168.1.74:8080/
i ｢wds｣: webpack output is served from
App · Updated src-capacitor/package.json
App · Updated capacitor.config.json
App · Running “C:\code\fleet-service\src-capacitor\node_modules@capacitor\cli\bin\capacitor sync android”
√ Copying web assets from www to android\app\src\main\assets\public in 10.10ms
√ Copying native bridge in 1.89ms
√ Copying capacitor.config.json in 2.71ms
√ copy in 51.86ms
√ Updating Android plugins in 794.50μp
Found 0 Capacitor plugins for android:
[warn] Your @capacitor/core version doesn’t match your @capacitor/android version
Consider updating to matching version npm install @capacitor/core@2.4.0
√ update android in 22.34ms
Sync finished in 0.088s
App · Updated capacitor.config.json
App · ️ IMPORTANT! Could not find MainActivity.java file and therefore cannot enable devServer: https support.
️
️ Opening Android Studio IDE…
️ From there, use the IDE to run the app.
️
️ DO NOT close the terminal as this will kill the devserver.
️
️ DO NOT upgrade Gradle or any other deps as Android Studio will suggest.
️ If you encounter any IDE errors then click on File > Invalidate caches and restart.
️
@Shone Thanks for the diagram, that’s a very interesting process. I’m currently just using production with no staging aside from local dev on my machine.
I’m having the same problem, but on windows. I confirmed that the android skd tools and platform tools are added to path and I created environment variables that go to the SDK root like it says in the capacitor getting started and in the developer link posted by @dobbel.
When I run the “quasar dev -m capacitor -T android” command, it only opens the windows explorer to the path. It does not open Android Studio.
Dev mode… capacitor
Pkg quasar… v1.12.8
Pkg @quasar/app… v2.0.8
Debugging… enabled
Running mode… IDE (manual)
Configured browser support (at least 86.16% of global marketshare):
· Chrome for Android >= 84
· Firefox for Android >= 68
· Android >= 81
· Chrome >= 75
· Edge >= 80
· Firefox >= 71
· iOS >= 10.0-10.2
· Opera >= 65
· Safari >= 10.1
App · Reading quasar.conf.js
App · ️ Detected external IP 192.168.1.74 and using it
App · Checking listening address availability (192.168.1.74:8080)…
App · Transpiling JS (Babel active)
App · Extending Capacitor Webpack config
App · Generating Webpack entry point
App · Booting up…
• Compiling:
└── Capacitor ████████████████████ 100% done in 8768 ms
DONE Compiled successfully in 8772ms 7:35:13 AM
i ｢wds｣: Project is running at http://192.168.1.74:8080/
i ｢wds｣: webpack output is served from
App · Updated src-capacitor/package.json
App · Updated capacitor.config.json
App · Running “C:\code\fleet-service\src-capacitor\node_modules@capacitor\cli\bin\capacitor sync android”
√ Copying web assets from www to android\app\src\main\assets\public in 10.10ms
√ Copying native bridge in 1.89ms
√ Copying capacitor.config.json in 2.71ms
√ copy in 51.86ms
√ Updating Android plugins in 794.50μp
Found 0 Capacitor plugins for android:
[warn] Your @capacitor/core version doesn’t match your @capacitor/android version
Consider updating to matching version npm install @capacitor/core@2.4.0
√ update android in 22.34ms
Sync finished in 0.088s
App · Updated capacitor.config.json
App · ️ IMPORTANT! Could not find MainActivity.java file and therefore cannot enable devServer: https support.
️
️ Opening Android Studio IDE…
️ From there, use the IDE to run the app.
️
️ DO NOT close the terminal as this will kill the devserver.
️
️ DO NOT upgrade Gradle or any other deps as Android Studio will suggest.
️ If you encounter any IDE errors then click on File > Invalidate caches and restart.
️
[SOLVED]
I was able to resolve this by placing the following code in my quasar.conf.js file, inside extendWebpack:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
ignoreOrder: true
})
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
}
};
Here is my full build config that I use with netlify for clarification:
build: {
scopeHoisting: true,
vueRouterMode: 'history',
// showProgress: false,
// gzip: true,
// analyze: true,
// preloadChunks: false,
// extractCSS: false,
// https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
// copy _redirects file for netlify
extendWebpack(cfg) {
const CopyWebpackPlugin = require('copy-webpack-plugin')
cfg.plugins.push(
new CopyWebpackPlugin([{
from: 'src/_redirects',
to: ''
}])
)
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
ignoreOrder: true
})
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
}
};
}
},
I’m having the same problem.
I have 2 repositories and I’m trying to move all the code from one to the other… in the first one it works fine. In the new one that has all the same exact files, it won’t build successfully.
WARNING in chunk chunk-common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/findSKU.vue?vue&type=style&index=0&lang=css&
despite it was not able to fulfill desired ordering with these modules:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/deliveryLabelFull.vue?vue&type=style&index=0&lang=css&
- couldn't fulfill desired order of chunk group(s) ,
WARNING in chunk chunk-common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/deliveryLabelFull.vue?vue&type=style&index=0&lang=css&
despite it was not able to fulfill desired ordering with these modules:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/lineItem.vue?vue&type=style&index=0&lang=css&
- couldn't fulfill desired order of chunk group(s) ,
- while fulfilling desired order of chunk group(s) ,
Oh cool, I didn’t realize you can inspect like that. I usually just have the console open then click the select element icon.
Dense looks like it should work for me too. Thanks for your help.
When using QSelect, how can I set the height of the entire control? If I set the height of the label, then it appears to be the correct size, but maintains additional space below it down to where the bottom border is. If I add borderless then visually it looks right, but the space is still preserved and leaves the options offset.
I can’t seem to inspect the options element or snip a screen shot of it since it closes after it loses focus. Here’s the codepen though. I made the background blue so that it is easier to see the gap between the options and the dropdown.
@RishitKedia Can you go into any more details about how to go about getting started making a chrome extension that uses quasar?
Or do you think you could possibly make a starter kit by removing all of the functionality from tabtation and just give us the basic setup for quasar?
I’d really like to use quasar in my chrome extension but I am having a really hard time getting started.
I was able to hack this to work locally by changing the actualValue computed property in QDatetime.js to just return the value, since I know I am setting it correctly.
//return formatDate(this.value, this.computedFormat, /* for reactiveness */ this.$q.i18n.date)
return this.value
However, now I don’t know how to keep that change in my netlify deployments. 