I can’t get the cordova-plugin-purchase plugin working either. The final step of finishing an order does not work in my app. So the product status of “owned” is always “false”.

I am thinking of a working solution to just create 2 Android packages: free and paid and publish them to the store.
I think the only thing I need to do is create a script to change the Cordova config.xml and AndroidManifest.xml and change the package name to either “my.app.id.free” or “my.app.id.paid” and then do “cordova platform remove android && cordova platform add android” before a build.

I spent a long time trying to get inapp purchase working on Android with the cordova-plugin-purchase plugin but I’m getting stuck at the final step of finishing an approved order. The product.finish() method seems to do nothing in my app and the product keeps in a not owned state.

@abdullah-sohail said in How do i add global filters to Quasar?:

I cant seem to figure out how to add filters globally . Should i make a folder for global filters and then export the filter file but where do i refer it there isn’t any option for filters in quasar.config.js.

I am using Quasar 2.0.3 and a global filter can be setup like described here: https://v3.vuejs.org/guide/migration/filters.html#global-filters

I needed a global dateFormat filter and this example works for me:

boot file:

import { boot } from 'quasar/wrappers'

export default boot(async ( { app } ) => {
  app.config.globalProperties.$filters = {
    dateFormat(value) {
      return 'date filter: ' + value
    }
  }
})

template:

<template>
    <q-page padding>
        {{$filters.dateFormat("hello")}}
    </q-page>
</template>

Output:

date filter: hello

Using these steps I can use sqlite3 with Quasar/Electron app

quasar create hello
cd hello
quasar mode add electron
yarn add sqlite3
yarn add electron-builder
./node_modules/.bin/electron-builder install-app-deps
quasar new b sqlite

edit boot/sqlite.js

import sqlite3 from 'sqlite3'

console.log(sqlite3)

const db = new sqlite3.Database('persons.db', (err) => {
  if (err) {
    console.log(err)
  } else {
    console.log('db opened')
  }
})

db.on("error", function(error) {
  console.log(error);
}); 

db.serialize(() => {
  db.run('CREATE TABLE if not exists persons (id int primary key, name varchar(64))')
  .run('delete from persons')
  .run(`insert into persons(id, name) values(1, 'a')`)
  .run(`insert into persons(id, name) values(2, 'b')`)
  .run(`insert into persons(id, name) values(3, 'c')`)
  .all('select * from persons order by id', [], (err, rows) => {
    rows.forEach((row) => {
      console.log(`${row.id} / ${row.name}`);
    });
  });
})

db.close()

export default async (/* { app, router, Vue ... } */) => {
}

in quasar.conf.js add boot file and webpack configuration

    boot: [
      'sqlite'
    ],

    build: {
      vueRouterMode: 'hash', // available values: 'hash', 'history'

      extendWebpack(cfg) {
        // externals property does not exist yet, so must be created, 
        // otherwise 'push' new item
        cfg.externals = {sqlite3: 'commonjs sqlite3'}

        // without this an error occurs !!!
        // -->>> * aws-sdk in ./node_modules/node-pre-gyp/lib/info.js, 
        //./node_modules/node-pre-gyp/lib/publish.js and 1 other
      },
    },

output from dev console

quasar dev -m electron

I got sqlite3 running now with Quasar and Electron without errors and can create a database/table!
Will post a step by step instruction tomorrow,

@gvorster said in Sqlite3 in Electron wrapper:

@Michele-Angioni @ffreitas It’s almost 2021, anyone found a solution to this?

I also tried the mentioned solutions and get the same error.

I tried this with Vue and Electron, so without Quasar, and got the same error.

After creating the file vue.config.js

module.exports = {
    configureWebpack: {
        externals: {
            sqlite3: "commonjs sqlite3"
        },
    },
    pluginOptions: {
        electronBuilder: {
            externals: ['sqlite3'],
        }
    },
};

I can run the electron app and use sqlite3.

Is there a place in quasar.conf.js or other file where these settings should fix this error?

@Michele-Angioni @ffreitas It’s almost 2021, anyone found a solution to this?

I also tried the mentioned solutions and get the same error.

@metalsadman said in QMarkdown TOC and Vue composition api:

@gvorster should be ref(null) I think. You should prolly await a nextTick in your function too. If you translate the snippet to composition would look about like this:

...
  const markdown = ref(null)
  const toc = ref(null)
  ...
  async func... 
    await context.root.$nextTick()
    toc.value = markdown.value.makeTree(toc)
  ...

Thanks, I tried nextTick but got the same error.

But anyway, I can see the passed TOC data inside the function so I can work with that to render it above the markdown text.

function onToc(toc) {
   console.log(toc);
}

I want to create a TOC in my markdown.

The doc gives this example:

<q-markdown :src="markdown" toc @data="onToc" />

methods: {
  onToc (toc) {
    this.toc = this.$refs.markdown.makeTree(toc)
  }
}

I am using Vue composition api. I tried this:

<q-markdown ref="markdown" :src="content" toc @data="onToc"></q-markdown>

setup(props, context) {
  const markdown = ref()

  function onToc(toc) {
    markdown.makeTree(toc)   // gives error
    markdown.value.makeTree(toc) // also gives error
  }

  return {
    markdown,
    onToc
  }
}

This gives the error

"TypeError: markdown.makeTree is not a function"

or

"TypeError: Cannot read property 'makeTree' of undefined"

What am I doing wrong.
BTW, I did not see a full example, should the TOC automatically be added at the top of a markdown text?

@gkentsidis said in Best way to accomplish masonry layout of divs (v1.0 beta 8)?:

Hi, I have the same issue. Can you please tell how did you implemented that component and used it? I followed the instructions provided with no success.

I tried this and it looks nice.
Small example using Quasar 1.14 and Vue composition api.

yarn add vue-masonry-css
quasar new b vue-masonry

Add vue-masonry boot file to quasar.conf.js

import Vue from 'vue'
import VueMasonry from 'vue-masonry-css'

Vue.use(VueMasonry);

Small test page wirth random length text:

<template>
  <q-page padding>
    <masonry :cols="3" :gutter="10">
      <div v-for="(item, index) in items" :key="index" class='card q-ma-md'>
        <span>{{item}}</span>
      </div>
    </masonry>
  </q-page>
</template>

<script>
import { ref } from "@vue/composition-api";

export default {
  // name: 'PageName',

  setup() {
    let items = ref([])

    for (let i=0; i<=25; i++) {
      let s = ""

      for (let n=1; n <= Math.floor(Math.random() * 15); n++) {
        s += "xxxxxx xxxxxx xxxxxxxxxxxxx xxxxxxxx "
      }

      items.value.push(s)
    }

    return { items }
  }
};
</script>

<style lang='stylus'>
.card
  border: 1px solid black;


</style>

Output

Using it in my little private code snippet library.

@kozyyy said in Event before exit the app:

Is there any way to invoke event when user quits mobile app? Vue’s ‘beforeDestroy’ method doesn’t work here.

Did you try the ‘pause’ and ‘resume’ events? When I click on the menu button the ‘pause’ event is fired as well as when switching to another app or the back button.

document.addEventListener("pause", (() => {
  console.log('pause');
}), false);

document.addEventListener("resume", (() => {
  console.log('resume');
}), false);

Got it working!
I unzipped the apk file and see that my mp3 is located in

assets/www/statics/sounds/click.mp3

I used this code to get the url to this file:

  window.resolveLocalFileSystemURL(
    cordova.file.applicationDirectory + "www/statics/sounds/click.mp3",
    fileEntry => {
      console.log("file", fileEntry);

      let o = new Media(fileEntry.nativeURL,
        () => console.log("yes!"),
        err => console.log(err)
      );
      o.play();
    },
    err => console.log("err", err)
  );

FileEntry in console.log:

Actually, only after a build the files in src/statics are copied to src-cordova/www/statics and that is where the cordova media plugin is looking in when given a URL. Because in dev some sound files were not playing until I either did a build or copied the files to src-cordova/www/statics

@jakemiles said in [Quasar app using cordova-plugin-media to play sound

I saw this in the docs

You can force serving static assets by binding src to a value with Vue. Instead of src="statics/path/to/image" use :src=" 'statics/path/to/image' " or :src="imageSrc". Please note the usage of single quotes within double quotes on the second code example (spaces have been added to see this visually on the documentation website - normally you would not have the spaces).

I tried this example and it works both in dev and prod (cordova/android).

<audio controls>
      <source :src="'statics/sounds/click.mp3'" type="audio/mpeg"/>
</audio>

But I want to use sound files in the statics folder with the cordova-media-plugin.

So, the mp3 file is there and it plays via the html audio tag. What url to use in the media plugin?

background-image: url("../statics/textures/texture2.png"); 

in app.scss is also the only thing that works for me in both dev and prod (cordova/android)

Ok, I looked at https://github.com/pratik227/echarts-quasar and didn’t have to add anything in quasar.conf.js
It just works.

@minko Can you post your quasar.config.js ?

I am getting error

ReferenceError: resolve is not defined

After adding

cfg.module.rules.push({
          test: /\.js$/,
          loader: 'babel-loader',
         include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]
        })

@dollique said in Axios: Request failed with status code 404:

axios().get(‘users’)

You could have a look in the dev console network tab what url is actually called and see if it’s correct.

@nobilik said in Trying to install Google Analytics. Very confused!:

@gvorster could you please write step-by-step instruction? I can’t understand what I’m doing wrong…

Here you go, created with the newest Qusar version 1.5.3

quasar new ga_test

save this into file ./src/components/gtm.js

import { uid } from 'quasar'

export default {

    logEvent (category, action, label, value) {

        dataLayer.push({
            'event': 'customEvent',
            'category': category,
            'action': action,
            'label': label,
            'value': value,
            'cid': this.getCid()
        });

    },

    logPage (path) {
        // Here you can preprocess the path, if needed
        dataLayer.push({
            'event': 'customPageView',
            'path': path,
            'cid': this.getCid()
        });

    },

    getCid () {
        // We need an unique identifier for this session
        // We store it in a localStorage, but you may use cookies, too
        if (!localStorage.cid) {
            localStorage.cid = uid();
        }
        return localStorage.cid;
    },

}

Save this into file ./src/boot/gtm.js

import gtm from 'src/components/gtm';

export default ({ router }) => {

    router.afterEach((to, from) => {
        gtm.logPage(to.path);
    })
}

Add this to quasar.conf.js

    boot: [
      'gtm'
    ],

I commented this in quasar.conf.js otherwise a lot of syntax errors are shown

/*       extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/,
          options: {
            formatter: require('eslint').CLIEngine.getFormatter('stylish')
          }
        })
      } */

Add a test to ./src/pages/Index.vue

<template>
  <q-page class="flex flex-center">
    <img alt="Quasar logo" src="~assets/quasar-logo-full.svg">
  </q-page>
</template>

<script>
import gtm from "../components/gtm";

export default {
  name: 'PageIndex',

  created() {
    gtm.logEvent("myCat", "myAction", "myLabel", 0);
    
  }
}
</script>

Add the Google scripts to ./src/index.template.html and change UA-XXXXXXXXX-X
and GTM-XXXXXXX with your own keys

<!DOCTYPE html>
<html>

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-XXXXXXXXX-X');
  </script>


  <!-- Google Tag Manager -->
  <script>(function (w, d, s, l, i) {
      w[l] = w[l] || []; w[l].push({
        'gtm.start':
          new Date().getTime(), event: 'gtm.js'
      }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-XXXXXXX');</script>
  <!-- End Google Tag Manager -->

  <title><%= htmlWebpackPlugin.options.productName %></title>

  <meta charset="utf-8">
  <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport"
    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">

  <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
  <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png">
  <link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
</head>

<body>
  <!-- DO NOT touch the following DIV -->
  <div id="q-app"></div>![alt text](image url)
</body>

</html>

quasar dev

When loading the app this is what I see in Google Analytics Dashboard real-time view.

@gvorster said in Trying to install Google Analytics. Very confused!:

I have not checked out the Google Tag Manager yet, so maybe I will come across your issue with the “dataLayer” too

I’m using Quasar 1.4.1

I just did a quick test adding a logEvent and it works for me

gtm.logEvent('test', 'test', 'Viewed home page', 0);

And I see it back in the GA dashboard Events page

@nobilik said in Trying to install Google Analytics. Very confused!:

@gvorster Hi! And where you put gtm.js component?

I put gtm-plugin.js it in src/boot folder but renamed it to src/boot/gtm.js and enabled it in quasar.conf.js

boot: [
     'gtm',
     'init',
     'settings',
     'firebase',
     'i18n',
     'axios',
     'vuelidate',
   ],

and put the other gtm.js in src/components/gtm.js

But I have only verified if Google Analytics dashboard is picking up the page views which is working.
I have not checked out the Google Tag Manager yet, so maybe I will come across your issue with the “dataLayer” too

I’m using Quasar 1.4.1