Questions tagged [quasar-framework]
Questions regarding the Quasar framework, with which you can build responsive websites(SPA/SSR), PWAs, hybrid mobile Apps (that look native!), browser extensions, and Electron apps using the same code, powered with Vue.
1,304
questions
0
votes
0
answers
8
views
Is there a way to use single-spa or micro front-end architecture to expose Quasar v1 app components to another app?
I want to expose some components from one quasar v1 app to another quasar v1 app using single-spa or any other micro front end architecture. Can anyone help with this as i am not able to find any ...
1
vote
1
answer
903
views
How to fix CORS for Capacitor/Quasar App in a Laravel API
I have an App built on top of Quasar and Capacitor, with an API built on top of Laravel. Everything works well on the dev environment until I build and install the app on my phone, then I keep getting ...
1
vote
1
answer
40
views
How can I prevent Quasar dropdown list from scrolling with the page?
I have following Code, using Quasar (Vue 3.0) and have following code:
<q-select filled v-model="model" :options="options" label="Filled" />
But when the ...
-2
votes
0
answers
21
views
Unable to fix webpack conflict with quasar and vue js
While using npm install in my app I am getting the next error.
How could I fix it?
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: WChats@0.0.1
npm ERR! ...
0
votes
0
answers
25
views
How to acquire a token when it expires using MSAL in Vue 3 + composition api
I used this repo on github https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-browser-samples/vue3-sample-app
I fallow the code examples Profie.vue and ...
0
votes
0
answers
16
views
Vue3.0 version + typescript + quasar-app-extension yarn build error
I'm using Vue3.0 version + typescript + quasar-app-extension
What I did
yarn build which in turn runs node build/index.js. But I encounter an error
I don't know why I'm getting an error
Keep in mind ...
0
votes
1
answer
38
views
Dropdown icon not showing for q-select quasar-framework
I am using quasar-framwork with vue-2. I have a q-select item in my vue file and its not showing dropdown incon instead its showing title 'arrow_drop_down' and 'cancel' texts.
Here is what i am seeing ...
0
votes
0
answers
18
views
How to install Quasar without CLI, install Vue and Viteste and configure them?
I need to create a project with Quasar without the CLI, and also with Vue and Vitest. Nowhere did I find how to install all these dependencies and configure to run a simple test. If anyone has already ...
1
vote
1
answer
15
views
Why does my dynamic image not display in child component using SSR in Nuxt and Quasar?
I am working on SSR projects (Nuxt, Quasar). When I try to display a dynamic image in a child component, the image is not displayed.
My current code is:
function getUrl (img: string) {
return ...
0
votes
0
answers
7
views
How to make SSR with QuasarFramework work and why is "preFetch" not executed?
I tried to make the Quasar-Skeleton-App run using SSR. I set up the Quasar skeleton with using TypeScript and Vite.
I have enabled SSR in Quasar and implemented a preFetch-Method in a component. It ...
0
votes
1
answer
31
views
using dynamic components in vue with composition API [duplicate]
Im trying to create a dynamic component in Vue 3 (quasar) using composition API. But I cannot render the components using composition API. While this works fine:
<template>
<p>
<...
0
votes
2
answers
89
views
Nuxt 3 server-side pagination with useFetch
I'm using Quasar UI and Nuxt 3. I have an existing API that I can access. Have nuxt2 project that works fine with Axios but trying to now use useFetch as per Nuxt3 docs.
Quasar's qTable has pagination ...
0
votes
1
answer
25
views
How can I add Typescript support to a Quasar 2 project running on Vite?
The Quasar 2 documentation contains a detailed section how to use Typescript with Webpack:
https://quasar.dev/quasar-cli-webpack/supporting-ts
My Quasar project, however, uses the Vite configuration ...
1
vote
1
answer
38
views
Detect if model change in Vue was triggered by user interaction or programatically
I have some trouble with Vue's reactivity and my custom component in Quasar 2. Here's the basic use case:
The component provides two radio buttons and a select dropdown.
Whenever the user changes one ...
0
votes
0
answers
23
views
Quasar Framework global User object
I have a quasar app which communicates with an api. I am on the latest quasar version. For the datahandling I use vuex-orm.
Now when the app first is opened a user needs to login. I would then like ...
0
votes
0
answers
22
views
Using quasar flex classes to achieve a centered sidebar menu while maintaining logo at the top
Is it possible using quasar flex classes to achieve the logo class in the top of the sidebar menu while then centering the parent div with class name menu-icons until the screen is collapsed ...
0
votes
1
answer
40
views
How to use a curved menu approach with a q-card as the body
I have a dashboard design I am working on in quasar that I am trying to get to flow correctly. When things squish together horizontally everything closes up smoothly and its very responses. My issue ...
0
votes
1
answer
15
views
Hide scrollbar in quasar webapp
I have a Quasar webapp with a standard layout of a header, container and a footer. Header and Footer is stuck in place. When the container is having enough content it will overflow with a fine quasar ...
0
votes
0
answers
22
views
How to export QUASAR static folders (css, fonts, icons, js & favicon.ico) to custom FLASK static subfolder
I am working on a single page application in QUASAR that I'd like to make available from a FLASK web-app.
I am struggling to distribute the QUASAR app's file, upon quasar build, so that the static ...
0
votes
2
answers
40
views
How to remove ripple effect from clicking q-list item
I have put together a nice sidebar that has a curved edge and flows nicely into the body of the page however I cannot for the life of me figure out how to get rid of the semi transparent ripple effect ...
0
votes
1
answer
29
views
How to display values from subclasses in quasar q-table
I am currently writing an quasar based electron app. In my typescript code i have the following interfaces:
interface CharterParty {
startDate: Date;
endDate: Date;
cargoType: string;
}
...
0
votes
0
answers
11
views
how can I display below q-options-group the description of an object of array?
i have this array
const options = [
{
label: 'Monday',
value: 'Monday',
description:'dsdfsdfsdfdsfds'
},
{
label: 'Tuesday',
value: 'Tuesday',
description:'...
0
votes
0
answers
17
views
Configure a Vue Quasar CLI app so that a Cypress test launches the app in PWA mode?
I need my Cypress e2e test to run my Quasar app in pwa mode. By default, even if I have my quasar app running in pwa mode when I launch Cypress with the yarn test:e2e command, Cypress opens another ...
1
vote
1
answer
43
views
Vue input loses focus after each provided or deleted letter
I want to use the quasar input to update my object from backend.
The object got the field called name
Here is the code
<q-table
:rows="state.rooms"
:columns="state.roomsFields&...
0
votes
0
answers
54
views
Can someone help me with a card flip animation in Quasar Vue.js3?
So i want to add a card flip effect on some cards, that should turn in a 3D animation when clicked around the y-axis for 180 degrees. On one side should be a question mark picture to cover the content ...
0
votes
0
answers
20
views
My problem that I can access Pinia state anywhere except inside Axios body. Why?
I'm using Pinia, Axios, Quasar
everything work except one thing.
this is my code:
state: () => ({
userName: "",
userEmail: "",
token: "",
}),
...
1
vote
2
answers
50
views
Quasar QSelect does not start on selected option
I have a Vue 3 / TypeScript app built using the Quasar UI library.
One of the components I am trying to build is an international phone input with a country dropdown using QSelect.
My problem is that ...
0
votes
0
answers
50
views
Quasar boot file and authentincation
I'm using Quasar for my app and it uses SSR and PWA.
I'm trying to have the User logged in if the Token in the cookies is still valid and I added a middleware to the various routes to block access if ...
0
votes
1
answer
63
views
How to generate a dynamic image grid with vue.js?
<template>
<q-page class="page bg-brown-2 q-pa-lg">
<div v-for="x in 15" :key="x" class="line flex flex-center row">
&...
0
votes
0
answers
47
views
how to update pinia states of two diffrent stores at the same time?
In want to initialize the states of two differents stores in my "pinia|supabase|quasar|vue 3" app
I try to launch the initializazion of the states from within my component with
onMounted(() =...
0
votes
1
answer
118
views
How to change the font weight and font size of the label in Quasar Tab
I'm using Q-Tab in my project and I tried to change the font-size and font weight of the label of the tab but I can't change it. I tried the typography in quasar but all of them still didn't work.
&...
0
votes
1
answer
20
views
requiring packages in src-electron
I am a beginner to the Quasar FW (with electron) and trying to integrate Oauth2 to let users authenticate. The second file is getting called by the first. But the require statements in the second file ...
1
vote
1
answer
62
views
Unable to use icons in Quasar
I am trying to use some icons with q-btn but to no avail.
I am trying to use mdi-v7 icons in my test project. To install the icons, I have followed the official documentation. In my ./quasar.config.js,...
0
votes
1
answer
35
views
Quasar app typescript errors on brand new app
I've created a brand new Quasar project using "npm init quasar". I'm getting all kinds of errors like the one shown below. I've not made any changes in the code. The project does seem to run ...
0
votes
0
answers
65
views
Quasar SyntaxError: Unexpected token 'export
I have installed quasar cli following the official website. I have created a test project using yarn create quasar command. Once I executed the the command quasar dev and it successfully executed a ...
0
votes
0
answers
46
views
Quasar gutter not working as expected between rows
I am currently trying to create an interface in my app using quasar.
I have the following code in my template in the mainLayout.vue:
<q-page-container>
<q-page>
<div class=...
0
votes
1
answer
44
views
How This command not run on quasar project "ENV_FILE=dev quasar build"?
I have a quasar project, I want to pass via cmd the name of the envirnomets variable for example: ENV_FILE=dev quasar build, for dev envirnonment, ENV_FILE=stg quasar build, for staging
and: ENV_FILE=...
0
votes
1
answer
42
views
Vue, Leaflet, accessing ref object / function
I have a running leaflet map in a vue project. Eg (only relevant vue code included).
<div style="height:70vh; width:100%; position: relative;">
<l-map ref="map" :...
0
votes
2
answers
147
views
Vue cant pass params on this.$router.push
I cant pass params from one component page that redirects to another page.
I have a confirmation that does some process of validation and redirects the user to the login page. In this case i want to ...
0
votes
1
answer
64
views
How to anchor Quasar QInput/QSelect placeholder label at top and within the QInput/QSelect boxes even when no data added or selected in them?
How to anchor placeholder label at top and within the QInput/QSelect boxes even when no data added or selected in them?
I am requesting this to avoid users assuming that data already added in the ...
0
votes
1
answer
45
views
Date-fns doesn´t convert my unix timestamps correctly
So i am trying to learn Quasar and Vue by building a Twitter clone from a freecodecamp tutorial and all was well until i tried to convert a unix timestamp with date-fns into a relative time like e.g. &...
2
votes
0
answers
69
views
Vue/Apollo useQuery with variables doesn't cache requests
I'm using Quasar with Apollo and the following component ProductsListPage.vue works as expected when route.params.id changes:
<template>
<q-page class="flex flex-center">
&...
0
votes
1
answer
25
views
iPhone camera goes into DeskView with QR code reader app - RealtimeMediaSource error
I'm writing an app (Quasar, Vue3, Capacitor) which uses vue3-qrcode-reader plug-in.
This allows me to scan in a QR code, which it does, the first time on my iPhone 12 Pro.
The second time the camera ...
1
vote
1
answer
147
views
Quasar dev (mode SSR) Unhandled error at setup function
I have recreated a project from Vue + Vite with Quasar SPA to Quasar CLI Vite SSR. I did that because I need SSR for SEO.
I succeded to import every files and fix all the errors, running SPA dev mode ...
0
votes
0
answers
29
views
How to get a nested data from json using axios?
A newbie here, I'm trying to use Quasar and Axios to make a simple user management system, and the problem is that I can't get the nested data from https://jsonplaceholder.typicode.com/users (...
0
votes
0
answers
134
views
Quasar table - columns sorting always false, the small arrow direction not changing
I am using server pagination with Quasar table. Pagination ref is :
const pagination = ref({
sortBy: 'desc',
descending: false,
page: 1,
rowsPerPage: 10,
rowsNumber: 0,
});
Q-...
1
vote
1
answer
38
views
how to make data from backend have breakline in frontend in vue?
i'm trying to achieve this.
supposely i have data in backend with
example: this data - #ghost\n#mik\n#bro
supposedly it is store in an array of an object
[ {hash:"#ghost\n#mik\n#bro"} ]
i ...
0
votes
0
answers
49
views
How to change rootcontainer div id element for a vue3 project created using Quasar
I created a Vue3 project using Quasar and have a requirement that I have to house this app on a html page along with another Vue app which is sitting on there. Both of the apps are for different ...
0
votes
0
answers
25
views
How to show error when passing wrong prop type?
I have a project on quasar with typescript support and i want to show errors when i pass wrong props value to my button component. For example i have prop named size with available values ['S', 'M', '...
0
votes
1
answer
122
views
how can i go to a routed page in quasar?
I'm trying to make this happen when i click the
example:
div
i want it to go to specific page
this example route
{ path: 'petInformation', component: () => import('src/pages/petInformation.vue') }...