As of May 31, 2023, we have updated our Code of Conduct.

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.

Filter by
Sorted by
Tagged with
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 ...
Sharad Gupta's user avatar
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 ...
3m1n3nc3's user avatar
  • 354
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 ...
Maryam Mikog's user avatar
-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! ...
Luiz Alves's user avatar
  • 2,483
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 ...
Anniel Marrero's user avatar
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 ...
eeez kim's user avatar
  • 175
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 ...
Amit Kumar's user avatar
  • 3,295
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 ...
Laís Silva's user avatar
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 ...
James's user avatar
  • 29
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 ...
delete's user avatar
  • 18k
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> <...
acroscene's user avatar
  • 835
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 ...
Ash's user avatar
  • 51
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 ...
Robert Strauch's user avatar
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 ...
Robert Strauch's user avatar
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 ...
PWFraley's user avatar
  • 1,002
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 ...
Irish Redneck's user avatar
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 ...
Irish Redneck's user avatar
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 ...
AP87's user avatar
  • 329
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 ...
Tommaso Mazza's user avatar
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 ...
Irish Redneck's user avatar
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; } ...
Barbarian772's user avatar
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:'...
Mikael Tenshio's user avatar
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 ...
Joshua S's user avatar
  • 109
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&...
user123145152323's user avatar
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 ...
Psynformatrix's user avatar
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: "", }), ...
Khorshid's user avatar
  • 303
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 ...
TinyTiger's user avatar
  • 1,465
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 ...
Ayeye Brazo's user avatar
  • 3,266
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"> &...
Psynformatrix's user avatar
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(() =...
Tax Raoul's user avatar
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. &...
rose pards's user avatar
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 ...
Ar034's user avatar
  • 31
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,...
Sudipta Roy's user avatar
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 ...
Loren's user avatar
  • 790
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 ...
Sudipta Roy's user avatar
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=...
Barbarian772's user avatar
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=...
Anniel Marrero's user avatar
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" :...
AP87's user avatar
  • 329
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 ...
Filip Simin's user avatar
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 ...
Ammamon's user avatar
  • 447
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. &...
Psynformatrix's user avatar
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"> &...
Miro's user avatar
  • 8,292
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 ...
jkc's user avatar
  • 19
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 ...
Retnilps's user avatar
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 (...
Sagun Mark Vincent C's user avatar
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-...
Tamás László's user avatar
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 ...
Mikael Tenshio's user avatar
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 ...
angular2fan's user avatar
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', '...
Bad_m's user avatar
  • 23
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') }...
Mikael Tenshio's user avatar

1
2 3 4 5
27