hawkeye64

timsayshey commented on 21 Jul • 
We came up with a workaround on our team to get Quasar and Tailwind to work together. Our goal was to build everything in Tailwind on Quasar but we didn't want Quasar styles loading in and taking over or conflicting with our Tailwind styles. The first thing we had to do was prevent the Quasar stylesheet from loading in however there is no option to disable it so we do a find/replace to remove it when webpack builds.

Run npm i string-replace-loader then add the following code to the extendWebpack() method in your quasar.conf.js file:

cfg.module.rules.push({
  test: /client-entry\.js$/,
  loader: 'string-replace-loader',
  options: {
    search: "import 'quasar/dist/quasar.sass'",

hawkeye64

function format(fmt, ...args) {
    if (!fmt.match(/^(?:(?:(?:[^{}]|(?:\{\{)|(?:\}\}))+)|(?:\{[0-9]+\}))+$/)) {
        throw new Error('invalid format string.');
    }
    return fmt.replace(/((?:[^{}]|(?:\{\{)|(?:\}\}))+)|(?:\{([0-9]+)\})/g, (m, str, index) => {
        if (str) {
            return str.replace(/(?:{{)|(?:}})/g, m => m[0]);
        } else {
            if (index >= args.length) {
                throw new Error('argument index is out of range in format');

hawkeye64

export default ({ Vue }) => {
  const examples = require('../assets/examples').default
  for (const index in examples) {
    import(
      /* webpackChunkName: "examples" */
      /* webpackMode: "lazy-once" */
      `../examples/${examples[index].file}.vue`
    ).then(comp => {
      Vue.component(examples[index].file, comp.default)
    })

hawkeye64

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach by Process ID",

hawkeye64

//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width 
  //first see if they have window.screen.width avail
  (function() {
    if (window.screen.width)
    {
      var setViewport = {
        //smaller devices
        phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
        //bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints  
        other: 'width=1045,user-scalable=yes',

hawkeye64

// CSS Color Names
// Compiled by @bobspace.
//
// A javascript array containing all of the color names listed in the CSS Spec.
// The full list can be found here: http://www.w3schools.com/cssref/css_colornames.asp
// Use it as you please, 'cuz you can't, like, own a color, man.

var CSS_COLOR_NAMES = ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory"

hawkeye64

function getRegexForDateFromat(dateFormat) {
    var dateValueRegexString =
        dateFormat.replace(/MM|M|DD|D|YYYY/g, function(match, position, original) {
            switch (match) {
                case "M":
                    return "([1-9]||1[0-1])";
                    break;
                case "MM":
                    return "(0[1-9]||1[0-1])";
                    break;

hawkeye64

const parse = (input: string, format: string, key: string): string => {
  const index = format.indexOf(key);

  return input.slice(index, index + key.length);
};

export const dateParse = (input: string, format: string = 'YYYY-MM-DD HH.mm.ss', { epoch = 2000 } = {}): Date => {
  let year = 2000;
  if (format.includes('YYYY')) {
    year = parseInt(parse(input, format, 'YYYY'), 10);

hawkeye64

Template Code:
<q-btn @click="home" >
  <q-icon v-html="$options.filters.svg('home')" ></q-icon>
</q-btn>

Boot File:
  Vue.filter("svg", function (code, options) {
    options=Object.assign({
      width : 20,
      height : 26,

hawkeye64

Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      // here I check that click was outside the el and his childrens
      if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent)