tohagan

// Fast and does not need width/height (CSS sizing is more powerful)
// https://github.com/udwarf/qrcode-compact-svg
import { QRCode as QRCodeSvg } from "./qrcode-compact-svg";

export default {
  name: "qr-code",
  props: {
    content: { type: String, required: true }, // URL or text to encode
    padding: { type: Number, default: 1 }, // 0 .. 1 padding
    color: { type: String, default: "black" }, // Foreground color

tohagan

// Polyfill to expand variables in a string

// Example: "Welcome back ${name}. Glad to see you".expandVars({name: "Fred"});
// Variables defined in `vars` can be string/number values or a getter function.
// eslint-disable-next-line no-extend-native
String.prototype.expandVars = function(vars) {
  return this.replace(/\${([^{}]*)}/g, function(str, varName) {
    var value = vars[varName];
    return typeof value === "string" || typeof value === "number" ? value : str;
  });

tohagan

Note: This guide applies to the project created by quasar-cli.

First install typescript and ts-loaderpackages in your project.

npm i -D typescript ts-loader

Then modified the quasar.conf.js file in your project:

tohagan

const express = require('express');
const app = express();

// Application
app.get('/', function(req, res) {
  if (process.env.NODE_ENV === 'development') {
    for (var key in require.cache) {
      delete require.cache[key];
    }      
  }

tohagan

<template>
  <q-page padding>
    <p>This is an about page</p>
  </q-page>
</template>

<script>
import Vue, * as VueTypes from "vue" // <<< Fix type mismatch in component property of Router rules.

@Component

tohagan

You can can use any of theses tools/options to conditionally compile JavaScript:

• https://github.com/nippur72/ifdef-loader
• https://www.npmjs.com/package/webpack-conditional-loader
• https://www.npmjs.com/package/webpack-preprocessor-loader
• https://www.npmjs.com/package/babel-plugin-conditional-compile
• webpack/webpack#99 - using Uglify options

tohagan

import Vue from "vue";

function getProp(obj, props) {
  let val = obj;
  let i = 0;
  for (i = 0; i < props.length - 1; i++) {
    val = val[props[i]];
    if (typeof val !== "object") return undefined;
  }

tohagan

// Clear Webpack console on hot reload.
// https://stackoverflow.com/a/53933757/365261
// add to main.js or app.js file
if (module.hot) {
    module.hot.accept(); // already had this init code

    module.hot.addStatusHandler(status => {
        if (status === "prepare") console.clear();
    });
}

tohagan

export type TraversePath = Array<string|number> | undefined;
export type TraverseVisitor = (parent: any, key: string | number, val: any, path: TraversePath) => void;

export function traverse(obj: any, visit: TraverseVisitor, path: TraversePath) {
  function perNode(key: string | number, val: any) {
    const path1 = path ? path.concat([key]) : undefined;
    visit(obj, key, val, path1);
    traverse(val, visit, path1);
  }

tohagan

// This line is only needed for server-side NodeJS. 
// You should have fetch() available in your client-side browser.
const fetch = require('node-fetch');

// https://jsonplaceholder.typicode.com - Provides test JSON data
var urls = [
	'https://jsonplaceholder.typicode.com/todos/1',
	'https://jsonplaceholder.typicode.com/todos/2',
	'https://jsonplaceholder.typicode.com/posts/1',