Eistime
commented
2 years ago same problem here!
Closed jsanchezba closed 2 years ago
Eistime
commented
2 years ago same problem here!
rstoenescu
commented
2 years ago Vue CLI v5 has just been released and it uses Webpack 5 instead of Webpack 4. This is the reason for the failures. Either wait for us to write a compatibility layer for Webpack 5 in vue-cli-plugin-quasar or use Vue CLI v4.
rstoenescu
commented
2 years ago Let's leave this open in the meantime
ESKempken
commented
2 years ago @rstoenescu. When do you expect this plugin to be made compatible with webpack 5? Any loose indication will help
jsanchezba
commented
2 years ago @rstoenescu. When do you expect this plugin to be made compatible with webpack 5? Any loose indication will help
Meanwhile i've started using quasar-cli and it's more than enough for me. It uses Webpack 5 as far as i know: https://quasar.dev/quasar-cli/handling-webpack#webpack-v5-compatibility-issues
Maybe will fit for you, i didn't know about its existence
murugappanrm
commented
2 years ago The Vite Plugin does not work either. The only thing that seems to work is the Quasar-CLI. I tried all the examples in the documentation on installation, none worked. Perhaps you need to update the documentation and/or update the software. The tutorials on Quasar (disappointingly not many) are all related to the Vue CLI. So as business solution developers who want to start with Quasar as an option are having second thoughts. Some have suggested or may have moved to Vuetify. I dont know, the whole Vue framework community seem to be messed up in 2022. Probably the reason why Vue js is on the decline and React is on the upswing. So sad.
Please review my comment as a way forward feedback. We are a community of IT business solution developers in ASEAN and currently re strategizing our IT plans, not a bunch of hard-core techies. Currently it appears that the only components still supporting business solution developers are bootstrap, vanilla js, jquery, css, html. php and stable frameworks Codeigniter and Laravel.
rstoenescu
commented
2 years ago Hi @murugappanrm
Let's not exaggerate. The Vue team releases Vue CLI v5 (with Webpack 5 instead of Webpack 4) and now this doesn't works. And this, and this and that. Now even Vue is on the decline. I mean, come on... Developers need to wait a bit for the ecosystem to catch up as Vue CLI v5 has just been released. If you can't wait, use Vue CLI v4.
On another note, if you're comparing Quasar with other solutions it means that you still haven't grasped it yet and what it brings. Everyone's looking for tutorials while the documentation is really everything that you need. You know Vue then Quasar is a breeze. You struggle with Vue then you'll struggle with Quasar too. You're not going to find something so deep and thoughtful anywhere else, but you just need to make an effort and read the documentation. It will pay off in spades.
Also, people don't seem to realize the effort involved in all the things that we've been doing lately. Same for Vue's team efforts. Vue (and also Quasar) have never been in a better shape and they're constantly getting better and better (eg. Quasar v2 with Vue 3 on Quasar CLI with Vite -- with composition API and script setup; it's freakin' amazing! -- pardon the language).
Bottom line: you're the only one saying nothing works. I'm particularly interested in why you say that the Vite plugin doesn't works yet Quasar CLI works. After all, Quasar CLI with Vite is actually using our Vite plugin too :) Also, why not use our strong recommendation (Quasar CLI) directly? It's not like you can't switch later on to something else if you won't like it.
PS: check out https://quasarcast.com/
murugappanrm
commented
2 years ago Hi @rstoenescu
Thank you for the update. What you need to understand is the difference between "business solution developers" and "technology developers". What you have mentioned in your posts relates to technology developers not solution developers. Solution developers are in the business of delivering system to achieve the business process functionality of an enterprise and not for the beauty or colors. To us, we are ruled by short. medium and long term strategies to ensure the business is running efficiently and must respond as fast as the business/customer needs changes. So coming to your point on reading the material, do you think we have the time , not to mention the inconsistent terminologies used by each software developer? Today, can you show me or direct me to a complete dictionary of terms used by IT? None and they cannot. As a result, we have to resort to tutorials which gives us a quick start and we only use your documentation as reference. But when documentation and tutorials do not match, we get stumped and frustrated. I hope i have said enough to give you a picture of our perspective. Its not that we dont want to use Quasar CLI it is because the tutorials available so far only seem to the vue/cli version. I am also wondering why there are not much tutorial on Quasar in the Youtube either. The tutorial which helped us a lot was Danny but even he has not done one for your latest version. You site points to an very old version which may no longer work given the current scenario.
Coming to the bottom line: When i use the Quasar CLI and start the app, i get the wonderful quasar initial page and all is fine. I installed using Vite Plugin exactly stated in your documentation and i run "npm run dev" (that the only script in package.json) i get the Vite page : see attached screen cap and zip of the generated code.
rstoenescu
commented
2 years ago @murugappanrm
Regarding your zipped project folder:
No, you haven't followed the instructions. Your sass is not pinned to 1.32.0. Remove the caret in package.json: "sass": "^1.32.0", --> "sass": "1.32.0",. And all is fine.
You're not using Quasar CLI, you're using a vite project and just our vite plugin. It's NOT the same thing. Again, highlighted in docs. You don't even need time reading the docs to understand it much if you're not doing fancy stuff. yarn create quasar -> pick what you need (recommending Quasar CLI with Vite, even though in beta), then quasar dev and quasar build and you'll already be far with your project.
Regarding your other comments:
I'm not here to judge, but what you're saying is that you don't have 60 minutes to read the docs for a framework that would help shave off months of development and headaches reinventing the wheel or implementing stuff that are already baked into the framework. And would rather go with other solutions where you'll definitely need to a lot more research to implement what you get out of the box from Quasar. Not to mention that instead of dealing with one team who supplies and ensures everything works from A to Z, you'll need to deal with multiple teams (one for UI, one for CLI, one for X package, one for Y package etc). However, at the end of the day, everyone should use what fits their needs best. It's just that without investing any bit of time into docs you are relying on the thinking and understanding of others and you may not reach the best conclusion.
We recommend the videos/podcasts/etc from @ldiebold including his https://quasarcast.com/course and Youtube page. Also, Danny has released lots of videos with Quasar v2 recently.
And finally, we're all here to help, including our community. https://chat.quasar.dev and https://forum.quasar.dev
ldiebold
commented
2 years ago You can also speak to me directly on Discord: ldiebold#0365
Perhaps it's just been bad timing with your initial interactions with the framework, given that VueCli only recently moved to Webpack 5.
I'm here to help, so please feel free to contact me directly if some of the finer details aren't coming together.
murugappanrm
commented
2 years ago @ldiebold ,
Thank you for the offer. I hope you remember me. I am the guy who asked if you were British in the Youtube channel. I am currently using all your videos for training. If you notice, the setup video #2 Getting Started - the Quasar/CLI step is no longer supported and i used "npm init quasar" and after some setup options i arrived at the same point as the tutorial. I am enjoying all the videos.
@rstoenescu
Thank you for the feedback, appreciated. The big Q i have is: if i followed the steps to the word in https://quasar.dev/start/vite-plugin (and adjust sass line to "sass": "1.32.0", in the resulting package.json) and run "npm run dev" script should i get a quasar welcome page? If i should, then it is still not working becuase all i get is Vite welcome page. BTW, also copied the codes for main.js and vite.config,js. Appreciate your advise.
The reason i am trying out the Vite version is that the development footprint is small, efficient and faster.
ldiebold
commented
2 years ago Oh I see the confusion.
No, there will not be a "Quasar Welcome" screen. Think of the plugin as "A normal Vue vite project, with the ability to add Quasar components."
You could, for example, be halfway through a vite project and add Quasar into the mix. Hopefully that shows why it doesn't make sense for there to be a "welcome" page.
It really is a much nicer developer experience using the cli!
In what way is the development footprint smaller/efficient/faster? The footprint would be the same (feel free to correct me on that @rstoenescu), the CLI is a far more efficient way to get started (for example, much of the linting setup already sorted for you), and a "Quasar Vite plugin" app will run just as fast as a "Quasar Cli Vite" app.
murugappanrm
commented
2 years ago Hi @ldiebold
I would not know if it would smaller, faster and efficient for quasar. I am yet to get it working and that is what i am trying. My comment comes from using vite in vuejs, and vuetify. I have an apps in vuejs using standard install and the whole package is huge and when i did the same using Vue -Vite, it was so small, loaded fast and very efficient.
Anyway, in short, the Vite Plugin detailed on the page simply add the quasar libraries into the existing Vite project, is that wight? Decided to dump it and stick to Quasar CLI. Now i have to find example website codes using Quasar CLI in their example. Until now i have not found any as most of them in the YouTube and Udemy are outdated. Appreciate your help if you could get a few example sites tutorial in YouTube.
Hi @rstoenescu
I am in contact with Danny, he advised me that he has not created any tutorials using the new version of Quasar. I see his point that he is not generating much revenue for the time spent. He last good full tutorial, which i purchased in Udemy , was based on a Quasar version that predates version 1.
ldiebold
commented
2 years ago @murugappanrm What's an example of a simple app you'd like to see built with Quasar Vite?
murugappanrm
commented
2 years ago @ldiebold
Somthing like this: https://www.youtube.com/watch?v=tW8wGs8_Pqw&t=171s . This will give the guys quick jumpstart and when they create the same they use Quasar documentation to see the value and usage of the components. I get so many for vuetify but none that matches quasar. Even Danny has created one a month ago as a tutorial for Vuetify.
ldiebold
commented
2 years ago So maybe a video building out an admin panel? I'll have a think about it. Might do a live stream where we just use some of the most common components.
My current roadmap is covering all the components, then moving on to other parts of the docs. Then, we'll start building real world apps with Quasar. It just takes time, and I want to try and stick to my current goals for the most part... a lot of people want a lot of different content!
In the meantime, also checkout takeoff! https://github.com/quasarcast/takeoff
murugappanrm
commented
2 years ago Ok thank you. Will wait. I will watch the video on Takeoff.
murugappanrm
commented
2 years ago I have seen the Takeoff. Its great and very helpful as a reference. Still looking for a full blown app like posted earlier. That really gives us solution perspective on how to use Quasar. Thank you so much.
rstoenescu
commented
2 years ago Released vue-cli-plugin-quasar v5.0.1 which has support for Vue CLI v5. https://github.com/quasarframework/vue-cli-plugin-quasar/releases/tag/v5.0.1
murugappanrm
commented
2 years ago Hi @rstoenescu ,
Thank you for the update. Will try the new version. Do i just adopt the same steps as stated in the current documentation?
@ldiebold , you are the man on the hour. Fantastic new video on Quasar CLI Vite. I went thru it at 4am this morning and now i am actually going to test it out. Thank you so much. I have directed my research team to work on it as well and get moving.
ldiebold
commented
2 years ago You're welcome! Hopefully this can serve as a foundation for something a bit "cleaner" in the future ☺️
rstoenescu
commented
2 years ago @murugappanrm Go with Quasar CLI with Vite. The vue-cli-plugin-quasar is for people going the Vue CLI route, which is far from ideal from both our standpoint and Vue Team's one (which has clearly stated that Vue CLI is in maintenance mode only).
yarn global add @quasar/cli
yarn create quasar
# pick Quasar CLI with ViteHi @ldiebold ,
One more help needed. I am trying use quasar UMD inside a php script (Codeigniter 4 to be exact). In php, i can use HTML code with the ID #app and use all the components. The thing i puzzled and got no help was in the same script how can i import a vue/quasar components like we due in Quasar CLI. Hope you could help on this. Many of us want to embed Quasar components to various php and html sites.
rstoenescu
commented
2 years ago @murugappanrm you don't need to import it. It's already there registered when on UMD. Just use it.
If you're keen on "accessing it" still, then you can do so by the global variable "Quasar" https://quasar.dev/start/umd#quasar-global-object
murugappanrm
commented
2 years ago @rstoenescu
Sorry i was not clear in the post. In the Quasar CLI version we create a component call "SideBar.vue" and then use in the MainLayout.vue. Under the UMD option, I am not how to do this. How do i insert such a component (not Quasar component)?
murugappanrm
commented
2 years ago Hi @ldiebold and @rstoenescu
Interestingly, i would a site that gave me a starter template using UMD . The site is https://v0-17.quasar-framework.org/guide/embedding-quasar.html. I used the optional method detailed below:
I managed to get the sample working and it gave me this but the version shows as 1.18.7.
I replaced the scripts and links as given in the documentation under Quasar UMD but it failed. This is the code i used:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<title>Quasar App - myapp</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"
type="text/css">
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.6.2/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<style type="text/css">
.logo-container {
width: 255px;
height: 242px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.logo {
position: absolute;
}
</style>
</head>
<body>
<div id="q-app">
<q-layout view="lHh Lpr fff">
<q-header elevated class="glossy">
<q-toolbar>
<q-btn flat dense round @click="drawerState = !drawerState" aria-label="Menu" icon="menu"></q-btn>
<q-toolbar-title>
Quasar App
</q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-drawer v-model="drawerState" bordered content-class="bg-grey-2">
<q-list>
<q-item-label header>Essential Links</q-item-label>
<q-item clickable tag="a" target="_blank" href="https://quasar.dev">
<q-item-section avatar>
<q-icon name="school"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Docs</q-item-label>
<q-item-label caption>quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/">
<q-item-section avatar>
<q-icon name="code"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Github</q-item-label>
<q-item-label caption>github.com/quasarframework</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://chat.quasar.dev">
<q-item-section avatar>
<q-icon name="chat"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Discord Chat Channel</q-item-label>
<q-item-label caption>chat.quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://forum.quasar.dev">
<q-item-section avatar>
<q-icon name="forum"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Forum</q-item-label>
<q-item-label caption>forum.quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://twitter.com/quasarframework">
<q-item-section avatar>
<q-icon name="rss_feed"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Twitter</q-item-label>
<q-item-label caption>@quasarframework</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<my-page></my-page>
</q-page-container>
</q-layout>
</div>
<script type="text/x-template" id="my-page">
<q-page padding>
<!-- page content; replace this entirely -->
<div class="row flex-center absolute-full">
<img src="quasar-logo-full.svg">
</div>
</q-page>
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.6.2/dist/quasar.umd.prod.js"></script>
<script>
Vue.component('my-page', {
template: '#my-page'
})
const app = Vue.createApp({
setup() {
return {}
}
})
app.use(Quasar)
app.mount('#q-app')
</script>
</body>
</html>
@murugappanrm What's wrong with the UMD/Standalone configurator form https://quasar.dev/start/umd ?
murugappanrm
commented
2 years ago The previous working example was generated using the following code page
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<title>Quasar App - mysample</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link rel="icon" href="favicon.png" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/quasar@^1.1.0/dist/quasar.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
.logo-container {
width: 255px;
height: 242px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.logo {
position: absolute;
}
</style>
</head>
<body>
<div id="q-app">
<q-layout view="lHh Lpr fff">
<q-header elevated class="glossy">
<q-toolbar>
<q-btn
flat
dense
round
@click="drawerState = !drawerState"
aria-label="Menu"
icon="menu"
></q-btn>
<q-toolbar-title>
Quasar App
</q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-drawer
v-model="drawerState"
bordered
content-class="bg-grey-2"
>
<q-list>
<q-item-label header>Essential Links</q-item-label>
<q-item clickable tag="a" target="_blank" href="https://quasar.dev">
<q-item-section avatar>
<q-icon name="school"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Docs</q-item-label>
<q-item-label caption>quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/">
<q-item-section avatar>
<q-icon name="code"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Github</q-item-label>
<q-item-label caption>github.com/quasarframework</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://chat.quasar.dev">
<q-item-section avatar>
<q-icon name="chat"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Discord Chat Channel</q-item-label>
<q-item-label caption>chat.quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://forum.quasar.dev">
<q-item-section avatar>
<q-icon name="forum"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Forum</q-item-label>
<q-item-label caption>forum.quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://twitter.com/quasarframework">
<q-item-section avatar>
<q-icon name="rss_feed"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Twitter</q-item-label>
<q-item-label caption>@quasarframework</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<my-page></my-page>
</q-page-container>
</q-layout>
</div>
<script type="text/x-template" id="my-page">
<q-page padding>
<!-- page content; replace this entirely -->
<div class="row flex-center absolute-full">
<img src="quasar-logo-full.svg">
</div>
</q-page>
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.1.0/dist/quasar.umd.min.js"></script>
<script>
Vue.component('my-page', {
template: '#my-page'
})
new Vue({
el: '#q-app',
data: function () {
return {
version: Quasar.version,
drawerState: true
}
}
})
</script>
</body>
</html>
The difference in the earlier code page are the links and scripts. In this code its using an older cdn. This one works fine. When i updated the links and scripts as generated by the Standalone configurator I get this output:
rstoenescu
commented
2 years ago @murugappanrm
The UMD/Standalone configurator works just fine.
That relic that you found is using an old version of Quasar and Vue 1 or 2. For the life of me, I still don't understand why you search in all places but the current docs, but anyway...
Quasar v2 needs Vue 3. So you probably updated the script tags and nothing more. Which is wrong. Vue 3 itself works differently. So, here's your code above done the right way:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<title>Quasar App - mysample</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.6.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<style type="text/css">
.logo-container {
width: 255px;
height: 242px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.logo {
position: absolute;
}
</style>
</head>
<body>
<div id="q-app">
<q-layout view="lHh Lpr fff">
<q-header elevated class="glossy">
<q-toolbar>
<q-btn
flat
dense
round
@click="drawerState = !drawerState"
aria-label="Menu"
icon="menu"
></q-btn>
<q-toolbar-title>
Quasar App
</q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-drawer
v-model="drawerState"
bordered
content-class="bg-grey-2"
>
<q-list>
<q-item-label header>Essential Links</q-item-label>
<q-item clickable tag="a" target="_blank" href="https://quasar.dev">
<q-item-section avatar>
<q-icon name="school"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Docs</q-item-label>
<q-item-label caption>quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/">
<q-item-section avatar>
<q-icon name="code"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Github</q-item-label>
<q-item-label caption>github.com/quasarframework</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://chat.quasar.dev">
<q-item-section avatar>
<q-icon name="chat"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Discord Chat Channel</q-item-label>
<q-item-label caption>chat.quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://forum.quasar.dev">
<q-item-section avatar>
<q-icon name="forum"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Forum</q-item-label>
<q-item-label caption>forum.quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item clickable tag="a" target="_blank" href="https://twitter.com/quasarframework">
<q-item-section avatar>
<q-icon name="rss_feed"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>Twitter</q-item-label>
<q-item-label caption>@quasarframework</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<my-page></my-page>
</q-page-container>
</q-layout>
</div>
<script type="text/x-template" id="my-page">
<q-page padding>
<!-- page content; replace this entirely -->
<div class="row flex-center absolute-full">
gigi
</div>
</q-page>
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.6.5/dist/quasar.umd.prod.js"></script>
<script>
const app = Vue.createApp({
setup () {
return {
version: Quasar.version,
drawerState: Vue.ref(true)
}
}
})
app.component('my-page', {
template: '#my-page'
})
app.use(Quasar)
app.mount('#q-app')
</script>
</body>
</html>I'll lock this conversation because all the latest comments have nothing to do with the subject at hand, which is vue-cli v5.
Describe the bug Quasar plugin fails when creating a new project with vue-cli 5.0.1. If you downgrade sass-loader to v10.1.0 it doesn't throw any error but with both cases, quasar doesn't load properly.
To Reproduce
Expected behavior Work out of the box
Screenshots
Platform: OS: Debian Node: v14.18.3 NPM: 8.5.1