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.
quasar-framework
1,471
questions
0
votes
0
answers
9
views
How to create a Q-Toolbar that becomes sticky on the top when user scrolls down?
I'm building a VueJS-Application using QuasarFramework that has a QToolbar inside a QHeader, so that the toolbar stays always on top.
Now I want to put the Toolbar little lower to have another ...
- 12.2k
0
votes
0
answers
9
views
Quasar BEX get data from content to popup
Goal sending event from app to content and get result of execution back
From the doc we need to chain/relay the event calls w background ex: app > background > content/dom
https://quasar.dev/...
0
votes
1
answer
29
views
How to access QInput element on mounted in Quasar 2
I want to access QInput element on mounted, so I make a custom directive. When I logged to the console, the element shown is QLabel. How to correctly access QInput element when it is mounted?
<...
- 1
0
votes
0
answers
43
views
Faild to resolve component quasar framework
i'm trying to import my custom components inside main layout file, using quasar faramework but i constently giving this message "failed to resolve component", if i import them directly in ...
1
vote
1
answer
31
views
How to get Q-Tree and Q-PopupEdit work together?
I have this code:
<q-tree
:nodes="data"
node-key="id"
:key="data.length"
label-key="name"
ref="refTree"
default-expand-all
...
- 1,011
0
votes
0
answers
24
views
How to add a third-party plugin in Quasar Framework (using SPA)?
I'd like to use the VueFire Vue Plugin in a Quasar project. I'm using Quasar as SPA application.
VueFire's documentation suggest installing it like this:
import { createApp } from 'vue'
import { ...
- 1,850
0
votes
1
answer
23
views
How to test Quasar boot files?
My boot file connects router with Vue i18n.
src/boot/i18n.js:
import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n'
import { i18nBootConfig, qDefaultLangPack } from 'src/i18n/...
- 1,015
0
votes
1
answer
47
views
Cordova iOS application - Opening a barcode reader causes a new screen to appear on top of the existing screen
After a recent IOS update, when we open the scanner an additional blank screen pops out apart from the regular scanner screen because of which the scanner functionality doesn't work. Refer attached ...
0
votes
2
answers
96
views
Quasar how I can change the height of q-select
I can't change the q-select in the quasar framework, I tried a long time also can't make it.
<q-select v-model="site1" outline dense class="selection" />
:deep(.selection .q-...
- 1
0
votes
1
answer
26
views
How to set Quasar Language with SSR Mode from route param?
How to use Quasar Language Packs with this kind of route and SSR mode?
const routes = [
{
path: '/:locale?',
beforeEnter: localeNavGuard,
children: [ ... ]
}
]
- 1,015
0
votes
1
answer
54
views
How to change Server Side rendered HTML before Client Side rendering on Quasar?
I am new to Vue.js. And I want to use Vue I18n. The problem is that when I set the locale on Vue I18n I need to set HTML lang attribute to the same locale but I can't access document on SSR mode. So, ...
- 1,015
1
vote
1
answer
82
views
Interrupt Quasar QDialog closing on Escape key, given a certain condition
I use a Quasar dialog for showing some content. I want the users to be able to close the dialog when clicking the Escape button, which works fine. However, if the user made some edits in the dialog ...
- 9,481
1
vote
0
answers
53
views
why does quasar not show errors in dev mode
Using "Visual Studio Code" for our quasar project, I see an error if I open a vue file:
This error actually causes the q-table not to be displayed, which is more serious than a simple ...
- 7,930
3
votes
0
answers
31
views
dynamically include or exclude capacitor plugins in a quasar webpack or vite project
I am trying to build an app that will both have a web spa and android apk. I am using quasar cli with webpack (also have an alternate with vite). I am using webpack since I could use require, I know ...
- 304
0
votes
0
answers
50
views
How to setup Google Analytics 4 with Quasar SPA Vuejs app
Having a hard time finding documentation or resources on setup of GA4 tracking for Vuejs 3 Quasar based app using typescript.
Would be nice to figure out how to setup vue-gtag package with it.
If ...
- 544
0
votes
0
answers
12
views
How to install Revenuecat on a Quasar/Vue app?
I have a quasar app that uses capacitor to create iOS apps. I am new to Revenuecat and trying to figure out the installation flow. The only relevant docs I see are the react or iconic/capacitor apps. ...
- 406
0
votes
0
answers
21
views
Error sending files with q-uploader in quasar 2.xx
I am trying to use quasar q-uploader component with nodejs/multer.
After I add a file to send to q-uploader and click my button to send, I am getting the next error and req.files is empty into file ...
- 2,615
1
vote
0
answers
43
views
Better approach to handle manual request in Apollo/GraphQL
Need some help with Graphql and Vue 3.
Look at this request:
const {
result,
loading,
error,
refetch,
onResult,
load
} = useLazyQuery(unitsQuery, variables, {
fetchPolicy: 'no-cache',
...
- 198
0
votes
2
answers
64
views
Quasar QTable, show fit QMenu for every row, opened by button
I'm trying to make Quasar table with button on every row, that open fit QMenu:
It works but I need to open QMenu only by button click.
<template v-slot:body-cell-name="props" >
&...
- 73
0
votes
0
answers
182
views
Vue js - Cannot find module '/app/node_modules/quasar/dist/transforms/import-transformation.js'
Today my npm run build suddenly failed, the error code was
Cannot find module '/app/node_modules/quasar/dist/transforms/import-transformation.js'
the weird thing is, yesterday my build was fine, but ...
- 1
0
votes
0
answers
81
views
Use Vuex and Pinia Store in Quasar
I am working on a Quasar app that uses Vuex. I need to use some modules that use Pinia so I would need to instantiate Pinia on my app as well.
My problem is, how do I instantiate both Vuex and Pinia ...
- 1,688
0
votes
0
answers
94
views
How to make a docker container for Quasar?
I am new to Quasar. And I have recently created a Quasar app, how can I dockerise it?
The problem with my current setup is that the browser reloads non-stop.
I changed this in quasar.config.js:
const {...
- 1,015
0
votes
1
answer
63
views
How to write universal code using composition API in Quasar?
Quasar website explains that to write universal code, the code that is in created and beforeCreate lifecycle hooks for Vue components is executed in Server Side Rendering (SSR). My question is: What ...
- 1,015
0
votes
1
answer
64
views
How do I make the pre tag decrease in width?
How do I make the pre tag decrease in width? The pre tag prevents the q-card from decreasing, when the browser window is shrinking. I want a q-card that will contain a code similar to that in ChatGPT. ...
- 47
0
votes
0
answers
59
views
How to access custom properties for pinia stores inside a setup store?
Let's say I define some custom properties for Pinia stores:
declare module 'pinia' {
export interface PiniaCustomProperties {
readonly router: Router;
set hello(value: string | Ref<...
- 18.9k
0
votes
1
answer
108
views
quasar dev keeps auto-refreshing every 5 (ish) seconds, how do I stop it from doing that?
I have a web server and backend running behind an nginx reverse proxy, but for some reason when I run quasar dev in such a setup the web server auto-refreshes every few seconds. This seems to be hot-...
- 22.3k
1
vote
1
answer
90
views
Listen to input validation events on Quasar
In my Vue3 Quasar project, I have a component similar to this:
<template>
<div class="q-pa-md">
<div id="myCustomLabel">{{ props.label }}</div>
&...
0
votes
1
answer
42
views
After Options Slot Disappearing on Quasar Select
I am currently working with a q-select on a Vue component.
I need to put a persistent button inside the q-select but the select itself has a filter, and that filter has the options inside of it. So, ...
2
votes
2
answers
72
views
Trying to use a Vue plugin (Vue3Mq) in a quasar app - How to configure?
I'm trying to configure a quasar javascript app to us a Vue plugin (Vue3Mq - for the media query capability).
After installing Vue3Mq with npm, I've have tried the following with no success:
Add ...
- 33
0
votes
0
answers
68
views
Quasar table header selection value always true
I'm working with vuejs and quasar and I find something. In this component Im using quasar table with multiple selection The header selection is not working as expected. I'm trying to exclude rows with ...
- 81
0
votes
1
answer
117
views
How to use vite-plugin-rewrite-all with Quasar (Vue 3)? (or enable periods in path another way)
When using quasar+vite in vueRouterMode: 'history' mode with paths matching thing/:id where the id has a period/dot, a 404 is returned. This is documented in a few different places:
https://github....
- 1,454
0
votes
1
answer
47
views
How do I position the buttons at the bottom in the q-input field?
How do I make the q-input buttons appear at the bottom with the autogrow property?
Reproduction URL
https://codepen.io/timamus/pen/bGJyYzP
Code
<div id="q-app">
<div class=&...
- 47
0
votes
0
answers
45
views
Video stream not displaying in browser using WebRTC
I'm currently working on a project where I'm trying to display a video stream received via WebRTC in a browser using VueJS (Quasar Framework) from one component to another. However, despite setting ...
0
votes
0
answers
26
views
ApexCharts set global default colors with Vue3
How to set global default colors and/or theme palette for ApexCharts using Vue3 + Typescript ?
PS: I'm using quasar cli.
I've tried to set Apex.colors following documentation, but it's not working.
I'...
0
votes
1
answer
51
views
How to emit an Event in VueJS 3 outside of a component?
I have a component that has an action to delete items. At the end of this operation I'd like to inform the parent component to refresh its data.
<template>
<div class="q-pa-md row ...
- 1,073
0
votes
1
answer
54
views
VUE 3 & Quasar QSlideItem component, @left : (details) => void
I am using Quasar's QSlideIten (q-slide-item) and the @left & @right event.
<q-slide-item
v-for="(tournament, index) in tournamentsFiltered()"
:key="...
0
votes
0
answers
17
views
Quasar BEX App port connection is Disconnected after a short time
When using Quasar BEX (Browser Extension) the connection with the App is lost and shown as disconnected (in allActiveConnections)
How to keep the service worker/background page running or how to ...
- 1,622
0
votes
0
answers
29
views
Cannot read properties of undefined (reading 'left') TypeError: Cannot read properties of undefined (reading 'left')
I am using Vue3 app and Quasar for UI components. I implemented header and basic page styling using quasar and then wanted to have tabs within a page. Whenever i use q-tabs in component.vue file i get ...
- 379
0
votes
1
answer
85
views
Issue with displaying Vue.js components inside q-expansion-item
I'm working on a Vue.js project using the Quasar Framework and I'm facing an issue. I have a list of items (essentialLinks) that I'm displaying using EssentialLink components inside a q-expansion-item....
- 1
0
votes
0
answers
44
views
Capacitor SplashScreen is black or white before showing (ios)
How can i configure this capacitor plugin, so that backgroundColor actually have the effect of changing the color of the background? Right now the App opens with a black screen a second or two, and ...
- 459
0
votes
1
answer
47
views
Eslint does not see the import error, how can I fix it?
I'm sorry for the broken English.
I use quasar using typescript code inside the file .vue (vue 3). I created the interface and imported it import { ICut, ICutMasterItem } from '@/models/cut/cut';, ...
0
votes
0
answers
54
views
How to get "partially ticked" node in Quasar q-tree
I use quasar tree and it is very useful for my project.
There are three states that are generated: selected, expanded and ticked.
I need to get the partially ticked i undelined in the the picture.
...
- 73
0
votes
1
answer
58
views
How to force actions to the right of Vue3 Quasar horizontal card
Does anyone know how to get the actions to go to the far right side with a small title with quasar classes or flexbox? If I replace the text on the right, it pushes the actions over, but I want them ...
- 683
0
votes
1
answer
208
views
vue 3 auto scroll to newly added list item in a quasar list with quasar area scroll
I am trying to get auto scroll to a newly added item in my q-list > q-scroll-area component. Everything I have tried is not working all I get is a flashing scroll bar and then nothing. this is what ...
- 375
0
votes
0
answers
33
views
Quasar Capacitor app looking for image in wrong location
I have made capacitor app from quasar and its not loading images when i use build command but works in dev the error i am getting is its looking for image in wrong location, like i have a component ...
- 1
0
votes
1
answer
108
views
Unable to preventDefault inside passive event listener invocation using Quasar Framework
I am using the Quasar Framework on a Vue3 application.
I have "successfully" integrated the <q-slider /> component. However, upon panning the knob on the component, the following ...
- 195
0
votes
0
answers
64
views
Failed to resolve component: q-card-title
I'm new to the Quasar framework, I have a warning in the console when running my website:
Failed to resolve component: q-card-title
Is there something I can do to correct it?
- 645
0
votes
0
answers
79
views
Quasar routing not working with vueRouterMode hash
I have a very simple routing, my routes.ts is below. When I use vueRouterMode: 'history' in quasar.config.js, it works as intended. However, when I use vueRouterMode: 'hash', as it was by default, it ...
- 645
0
votes
0
answers
52
views
Basic routing using Quasar/Vue.js
It's my first Vue.js app and I have only limited knowledge of JavaScript. I started a new app using Quasar and I'm really struggling to make the basic routing work. This is the file it gave me, which ...
- 645
0
votes
1
answer
176
views
App Not Installed Package Appears To Be Invalid - Quasar App for Android build with capacitor
I'm currently working on an cross-platform app. I'm using Quasar & Vue and Capacitor. My app is working well on desktop and is building 'fine'. But when I want to install it in my phone (or ...
- 1