The Loading plugin is used differently than most Quasar components. It’s just called and dismissed via JavaScript code and doesn’t exist in the HTML section.

I’m wondering how I can add a progress bar to it. I like the modal nature of the Loading plugin and the ease of use. Can I use it together with a Progress Bar, or do I need to build my own mash-up using a Modal + Spinner + Progress Bar?

Once again, solving my own issue…

I updated to 0.17.22/0.17.18 and the delete Xs are now there.

@kayex I can confirm the need to set open: false

I ended up having to use my own chip rather than the one built into the count property. Some CSS was required to get it into the right position.

For anyone interested, I managed to get this to work.

First, from my VUE file, which is a Quasar layout file:

<div
          id="clockdiv"
          v-show="isAuthenticated"
        >
          <q-tooltip>
            Due to HIPPA concerns, if you're inactive on this website, you'll be logged out when time expires.
          </q-tooltip>
          <div
            id="timerTitle"
            class="smalltext"
          >
            Auto
            <br>
            logout
          </div>
          <div>
            <span
              id="minutes"
              class="minutes"
            />
            <div class="smalltext">Min</div>
          </div>
          <div>
            <span
              id="seconds"
              class="seconds"
            />
            <div class="smalltext">Sec</div>
          </div>
        </div>

mounted () {
    this.listener = (event) => {
      // console.log('document event triggered')
      this.initializeClock('clockdiv', new Date(Date.parse(new Date()) + 20 * 60 * 1000))
    }
    document.addEventListener('mousedown', this.listener)
    document.addEventListener('keydown', this.listener)
    document.addEventListener('touchstart', this.listener)
  }

And my plugin file (idle-vue.js):

import Vue from 'vue'
import IdleVue from 'idle-vue'
import store from '../store'

const eventsHub = new Vue()

export default ({ Vue }) => {
  const options = {
    eventEmitter: eventsHub,
    idleTime: 1200000, // 20 minutes
    store: store,
    startAtIdle: false,
    events: ['keydown', 'mousedown', 'touchstart']
  }
  Vue.use(IdleVue, options)
}

I’m using 0.17.15/0.17.12. Like the subject says, I have a q-select inside of a field (same if not in a field) which has chips activated. The chips show up, but they don’t have individual X buttons to remove them. One must popup the select with the checkboxes instead and uncheck items. Adding/removing ‘clearable’ makes no difference. Here is my code:

<q-field
          v-show="singleMultiPat === 'multiple'"
          id="report-department-selection"
          helper="No selection = all"
          label="Nursing Areas"
          orientation="vertical"
          count
        >
          <q-select
            v-model="nursingAreasPlus"
            multiple
            chips
            clearable
            separator
            :options="departmentOptions"
          />
        </q-field>

Any ideas? I’m not getting any errors, of course.

Thanks for that. I’m giving it a try right now. I’m a bit confused on using Vuex with it though. As you know, Quasar does its own thing with Vuex, and stores, and I’m unclear how to slot this in. If you’ve done this already, I’d appreciate a hint. Otherwise, I’ll just give a few things a try. That said, it seems like it’s optional, so why would I need it for this?

Hello,

I have a need to auto-logout users after a set amount of inactivity. The timer should start when the user first logs in, and should be reset so long as they are obviously engaged. I’ll define what that means later, but for now, such an operation clearly shouldn’t block the main thread.

I’ve done a cursory look around and there were two mentions in these forums for x10, which uses web workers, but I didn’t figure out whether it communicates back to the main thread or not on an ongoing basis. I also found vue-web-worker (or something like that) which makes creating web workers easy, but the request in the issue queue to allow for workers to communicate back to the main thread have gone unanswered. It seems like that both modules are one-way and that threads are expected to just do something then die. Unless, I don’t understand them.

So at this point, the only solution I can think of is to set a timestamp X amount in the future at login, then update it when the user clicks around. If they walk away and come back after expiration, then take them to the login screen. The issue with that is I don’t want to leave their last screen up for that long as it could contain sensitive information.

Ideas?

Why do I always find the answer just after I post here?

import VueApexCharts from 'vue-apexcharts'

export default ({ app, router, store, Vue }) => {
  Vue.use(VueApexCharts)
  Vue.component('apexcharts', VueApexCharts)
}

I understand how to register a component on a per-file basis. I’ve got VueApexCharts working on a particular vue file. I also understand to some degree how to create plugins as I have for axios, casl, vuelidate, and vue-observe-visibility. However, none of those supplied VueJS components like VueApexCharts does. I was under the assumption that if I can globally register the component, then I won’t have to import and register on each vue file.

My plugin file so far looks like this:

import VueApexCharts from 'vue-apexcharts'

export default ({ app, router, store, Vue }) => {
  Vue.use(VueApexCharts)
  console.log('components', app.components)
}

In place of the console log, I have tried to set the component of the app like this:

app.components= {
    apexcharts: VueApexCharts,
  }

but that doesn’t work. I’ve tried a few variations with no luck.

I have read, and re-read the docs on plugins about 6 times, and also looked around here on the forum and read a couple dozen articles. Most related to components were of the per-file variety and the ones on global registration pointed to the docs or were for much older versions and didn’t work.

I’m sure there is something small I’m not getting. Any pointers, here?

Thanks!