Currently, I am utilizing quasar in one of my projects. The dialog component I am using is becoming redundant in multiple instances, so I am planning to create a dialog wrapper component named my-dialog. my-dialog.vue <template> <q-dialog v-bin ...
Create a website catering to both regular users and management. For instance, normal users are identified as 1, so if their account ID is also 1, they can access a page with limited functionality. Similarly, management is identified as 2, and they too acce ...
As a beginner in android development, I am currently embarking on my first Capacitor Android app project using Quasar/Vue. My goal is to enable the app to receive files/images shared from other apps. Through research, I have discovered how to register my a ...
In my current project, a quasar (vuejs) app, I am faced with an issue related to an update form functionality. The challenge I am encountering is that when I submit the form without making any changes to the select box, it submits the label as a string ins ...
Is there a way to prevent the input field from jumping out of alignment when an option is selected in these q-select inputs? I want to fix this issue so that the field remains in line with the horizontal alignment. https://codepen.io/kiggs1881/pen/RwENYEX ...
I have a vuejs application where I am utilizing axios for handling HTTP requests. The authorization header is being set through a request interceptor, like this: const api = axios.create({ baseURL: process.env.API_URL, crossdomain: true, headers: { ...
As the user prepares to close the browser, I aim to transmit information to the server indicating that they have gone offline. Despite extensive research into this matter over a period of days, I have yet to uncover a solution. Can anyone provide guidanc ...
Regrettably, I am facing an issue where the fonts do not load when accessing a page with Quasar integration. In the Developer Tools, it shows a path error like this: http://localhost:6006/undefined/node_modules/@quasar/extras/roboto-font/web-font/KFOmCnqEu ...
I have implemented a wrapper component that encapsulates a Quasar q-select element in the following manner: <template lang="pug"> q-select( :options="organisations" option-value="id" v-bind="$attrs&quo ...
I'm currently utilizing the most recent version of quasar (0.17) and I am attempting to implement the autocomplete functionality. Although I can successfully filter the list and choose a value, the text in the autocomplete list is not being displayed: htt ...
Currently, I am developing a program using the Quasar framework which is based on Vue and can be compiled for mobile using Cordova. However, I am encountering some issues when trying to run it on mobile. Below is the function causing problems: activat ...
I am currently working on a Quasar application and utilizing VueX to manage the state of my app. However, I am encountering an issue when trying to update properties within a for loop. Despite inputting values, they do not seem to be getting set in the st ...
I'm currently utilizing QUASAR and encountering an issue where I am unable to retrieve the state of my q-checkbox to determine whether it is checked or not. Despite using event.target.checked and event.target.value, both return as undefined. Below is ...
I am facing issues with selecting a file using this component in an android build. It was functioning properly on the web, but after building for android, it seems to be malfunctioning. <q-file v-model="file" label="Change Profile Picture" u ...
Just starting out with vue and quasar. This piece of code is in my vue file, but I'm not quite sure what it does. <router-view v-if="some_object" :abc="abc" :xyz="abc_xyz" :title="title" @updated="getABC" @refreshABC="getABC"/> As far as I kno ...
I find myself struggling with the arrangement of Quasar and it's not quite clicking for me, even after going through the documentation. The scaffolder presented me with this code snippet. However, it positions the Drawer on the left side. Is there a ...
Currently, I am working with Vue.js 2.x + Quasar 1.x using http-vue-loader (no build tools required). I have placed a q-dialog in a separate component named MyComponent. However, when I try to include it in a parent component like this: <my-component&g ...
I'm experiencing difficulties accessing Quasar's this.$q within a node module and using it as a boot plugin in the Quasar CLI. In a component where I initialize my QLayout and can successfully access this.$q, I encounter errors when attempting to access t ...
https://i.stack.imgur.com/4MN60.png Is it possible to modify the color of the '!' icon? ...
I'm a newcomer to the world of Quasar Framework and Vue.js. I recently tried implementing the q-option-group component in my simple application but encountered an issue where the model-value and @update:model-value did not toggle between options as expecte ...
Trying to retrieve a specific collection from Firebase Firestore is giving me an error that I haven't been able to resolve yet. Below is the code snippet from my boot file: import { initializeApp } from "firebase/app"; import { getFirestore } fro ...
Is there a way to trigger the logout function only when the tab or browser is closed, and not when the page is refreshed? I attempted the following code example, which successfully triggers the logout on tab close but also logs out when the page is ref ...
I've been working on my project using Q-Tab, and I've been trying to adjust the font size and weight of the tab labels without success. I've experimented with the typography options in Quasar, but nothing seems to work. <q-tabs v-model="tab" ...
I am using Vue and q-select to list file types (excel, csv) for uploading. My goal is to filter the files accepted for upload based on the file type selected by the user from the dropdown list. For instance, if a user selects excel from the q-select menu, ...
Could someone provide some guidance on how to create a table with nested elements like the one shown in the screenshot? View table image here I am facing an issue connecting additional drop-down lines within the table. Is there functionality available fo ...
Here's the code snippet I used for the q-select element: <q-select square outlined fill-input standout="bg-grey-3 text-white" v-model="unit_selection" :options="units&qu ...
I'm currently integrating SVG icons into my project using Quasar and I am facing an issue with the q-btn-toggle component. The documentation suggests providing a direct path to the SVG file, but in reality, the icon does not display. Below is a snippet of ...
Incorporating VueJS with Quasar framework, I created a data table. Here is my implementation: <template> <div class="q-pa-md"> <q-table title="Task List Of The Day" :columns="columns" row-key="name" :pagination ...
While running $ quasar dev on my Vue project, I encountered the following error: ~/project/node_modules/webpack-merge/dist/index.js:63 throw new TypeError("Merging undefined is not supported"); ^ [ TypeError: Mer ...
Looking for some help with a quasar q-input element - I want to be able to toggle its enable and disable state at the click of a button. I managed to add a button to the input using v-slot:after, but I am struggling to figure out how to remove the "disabl ...
I attempted to utilize the JSDoc for VueJS plugin according to the documentation but unfortunately, it didn't work out as expected https://github.com/Kocal/jsdoc-vuejs Can anyone recommend a reliable tool for documenting applications developed with ...
I seem to be having an issue with my code where no matter what route I give, it only takes me to the home page. Specifically, when I give the path "auth", it still redirects me to the home page. Can someone please help me understand why this is happening a ...
I'm just starting out with Quasar and I'm looking to keep the animation/class change of a q-select (Quasar input select) disabled. Essentially, I want the text to remain static like in this image: https://i.stack.imgur.com/d5O5s.png, instead of changing ...
Inside the q-btn, there is a q-checkbox. Additionally, I included a div to style the text. <q-btn flat color="blue" class="full-width no-padding" @click="tog(item)" > <q-checkbox ...
Seeking Assistance I am looking to integrate an "Arabic keyboard input filtering" using the onkeyup and onkeypress events similar to the example provided in this link. <input type="text" name="searchBox" value="" placeholder="ب ...
Looking for solutions to speed up the loading of a list containing pre-signed image urls. Is there a method to reduce the size of the images or accelerate their loading time? Experimented with converting images to canvases in an attempt to decrease file s ...
I am currently working on a Vue JS project and I am looking to incorporate some components, such as range sliders. However, I am struggling to understand how to integrate these components into my existing project. I have tried following tutorials for insta ...
I've been tackling a table project using Quasar framework's Q-Popup-edit and Vuex Store. The data populates correctly initially. However, any changes made on the table do not seem to persist and revert back to their original values. Here is a snippet of ...
I am facing an issue with my Vue 3 / TypeScript app that is using Quasar. I have an object containing the relative path to my images, and I'm attempting to use that path to load the image for a Quasar component q-img. Below is an example of the code: ...
I am attempting to create a dynamic navigation list using the routes defined in my routes.js: const routes = [ { path: '/', component: () => import('layouts/MainLayout.vue'), children: [ { ...
I have a single .js file with the following code: export default (vueInst, obj, events) => { for (const eventName of events) { ... } } An issue has occurred: Error at Function.missingTransform in /node_modules/buble/dist/buble.cjs.js:376:9 T ...
Previously, my Jest tests were functioning properly with Quasar version 0.14. Currently, some simple tests and all snapshot-tests are passing but I am encountering issues with certain tests, resulting in the following errors: console.error node_modules/vu ...
I recently set up a project using Vue3 and Quasar by running vue add quasar. However, I am struggling to figure out how to utilize Quasar sass/scss variables. According to the documentation, I should use the following syntax: <style lang="scss&quo ...