Hi, I don’t use the PWA starter, but I did have some issues myself importing firebase into Quasar when I started. I can’t say I know the best way to do this, but I currently use the following, and it works for me:

import firebase from 'firebase/app';
import "firebase/auth";
import "firebase/firestore";
import "firebase/storage";

const config = { stuff };

firebase.initializeApp(config);

const auth = firebase.auth();
const firestore = firebase.firestore();
const storage = firebase.storage();

export {firebase, auth, firestore, storage};

And, then I import the pieces I need like this:

import { firebase, auth, firestore, storage } from './firebase.js';

A small personal project with firebase/firestore. You can view at https://boolyapp.com .

Not sure if I’m actually going to do anything with it yet, but it was fun. Working with Quasar and firebase is a breeze, but I can’t for the life of me get an app with firebase to work with cordova yet. I’ve gone through everyone’s docs, but there’s always just enough missing or different from my exact situation to make it a pain in the ass for me (someone with little experience in that area).

As the name suggests, I’m having an issue getting an updated row index after sorting a table.

I’m using the data table to display a leaderboard, where I want to be able to sort by different columns, but maintain a column that is a static #1-10. I first tried using “props.row.__index”, which does work as I need it to initially, but not after sorting. I’m sure that’s intended; I’m just trying to find a solution for my use case. I also tried more hacky ways unrelated to the component, like calling a function in that cell that iterates a number variable and returns it, but that didn’t seem to work either.

Does anyone have a suggestion for how I can accomplish this?

Thank you for your time,
Paul

@leon

I have used awesome-mask successfully with quasar inputs. https://www.npmjs.com/package/awesome-mask

I think in general you don’t want a package that offers a component only; you want a directive or something. Unfortunately, I’ve tried many of the available options, and most had limited to no compatibility. That may have been a problem unique to my project, but that was my experience.

@leon

I have used awesome-mask successfully with quasar inputs. https://www.npmjs.com/package/awesome-mask

I think in general you don’t want a package that offers a component only; you want a directive or something. Unfortunately, I’ve tried many of the available options, and most had limited to no compatibility. That may have been a problem unique to my project, but that was my experience.

I was able to fix the background issue by applying the style to “.q-table-middle” or adding the style using the component prop (which does the same thing). Still can’t figure out why the lines don’t extend all the way and why the input behaves differently. I know no one is able to test this using my app. I was just curious if this was a known issue on iPhone with an obvious fix.

I’m having an issue with q-table on my iPhone, although I’m not sure if it happens on other devices. On desktop, everything looks correct, but on my phone, when I scroll to the right, a few things happen. 1. The white background I added to the table disappears. 2. When I scroll to the point where the white background is out of view, all the separator lines disappear. 3. Inputs that work correctly on desktop don’t show the input text in the box until blur. In some cases, it’ll show the first letter and then it just looks like blank space being added when I type.

I attached two screenshots below to show what I mean. I would appreciate any insight into this. Thanks!

I got it to work using a function after all. The reason it wasn’t working before was because I was using a reactive variable, which created an infinite loop. I just used a global non-reactive variable, and it worked.

This can probably be done a better way or be improved. This is just the first thing I tried that works for me, but I figured I’d share, in case this helps anyone.

HTML:

<q-td key="position" :props="props">{{getRowIndex()}}</q-td>

JS:

window.rowIndex = 0;

getRowIndex: function() {
    window.rowIndex += 1;
    if (window.rowIndex === 10) {
        window.rowIndex = 0;
        return 10;
    }
    if (window.rowIndex === this.leaderboard.length) {
        window.rowIndex = 0;
        return this.leaderboard.length;
    }
    return window.rowIndex;
}

As the name suggests, I’m having an issue getting an updated row index after sorting a table.

I’m using the data table to display a leaderboard, where I want to be able to sort by different columns, but maintain a column that is a static #1-10. I first tried using “props.row.__index”, which does work as I need it to initially, but not after sorting. I’m sure that’s intended; I’m just trying to find a solution for my use case. I also tried more hacky ways unrelated to the component, like calling a function in that cell that iterates a number variable and returns it, but that didn’t seem to work either.

Does anyone have a suggestion for how I can accomplish this?

Thank you for your time,
Paul

I’m using NPM, and the provided fix ‘npm install --save-dev prettier@1.12.0’ worked for me. Thank you for your time!

I’m aware of those changes, which is why I started a fresh project.

Also, I did try removing node_modules and reinstalling, just in case, but nothing changed.

I have an existing v16 project working fine, but I just updated an older project and haven’t been able to figure out what my problem is. Here’s what I did:

1. Updated the cli to latest, globally and locally.
2. Started a fresh project with quasar init.
3. Copied my files over and changed everything I needed to (at least I thought so).
4. Ran quasar dev and get the following error for every module:

ERROR in ./src/components/builder/choices.vue?vue&type=template&id=1dd6811e (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/components/builder/choices.vue?vue&type=template&id=1dd6811e)
Module build failed:   Error: No parser and no file path given, couldn't infer a parser.

  - index.js:7051 normalize
    [ramify]/[prettier]/index.js:7051:13

  - index.js:10370 formatWithCursor
    [ramify]/[prettier]/index.js:10370:12

  - index.js:31115
    [ramify]/[prettier]/index.js:31115:15

  - index.js:31134 Object.format
    [ramify]/[prettier]/index.js:31134:12

  - compileTemplate.js:93 actuallyCompile
    [ramify]/[@vue]/component-compiler-utils/dist/compileTemplate.js:93:29

  - compileTemplate.js:26 compileTemplate
    [ramify]/[@vue]/component-compiler-utils/dist/compileTemplate.js:26:16

  - templateLoader.js:42 Object.module.exports
    [ramify]/[vue-loader]/lib/loaders/templateLoader.js:42:20

 @ ./src/components/builder/choices.vue?vue&type=template&id=1dd6811e 1:0-210 1:0-210
 @ ./src/components/builder/choices.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/builder/scene.vue?vue&type=script&lang=js
 @ ./src/components/builder/scene.vue?vue&type=script&lang=js
 @ ./src/components/builder/scene.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/builder.vue?vue&type=script&lang=js
 @ ./src/pages/builder.vue?vue&type=script&lang=js
 @ ./src/pages/builder.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./.quasar/entry.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./.quasar/entry.js
Child html-webpack-plugin for "index.html":
                                   Asset      Size  Chunks  Chunk Names
                              index.html  1.38 MiB       1
    061a3c3e0d3586b7fb7b.hot-update.json  44 bytes
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.template.html] 1.42 KiB {1}
    [./node_modules/lodash/lodash.js] 527 KiB {1}
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {1}
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {1}

If someone could even point me in the right direction, maybe I could figure it out from there. I have used Quasar a good bit, but I don’t know much about webpack.

Thanks.

Hi, I don’t use the PWA starter, but I did have some issues myself importing firebase into Quasar when I started. I can’t say I know the best way to do this, but I currently use the following, and it works for me:

import firebase from 'firebase/app';
import "firebase/auth";
import "firebase/firestore";
import "firebase/storage";

const config = { stuff };

firebase.initializeApp(config);

const auth = firebase.auth();
const firestore = firebase.firestore();
const storage = firebase.storage();

export {firebase, auth, firestore, storage};

And, then I import the pieces I need like this:

import { firebase, auth, firestore, storage } from './firebase.js';