Best posts made by Hawkeye64

I just published my tutorial “Building an Electron File Explorer with Quasar (and Vue)”. If interested, check it out: https://medium.com/quasar-framework/building-an-electron-file-explorer-with-quasar-and-vue-7bf94f1bbf6

A new Quasar UI App Extension
@quasar/qactivity v1.0.0-alpha.1 Release! https://github.com/quasarframework/app-extension-qactivity/releases/tag/v1.0.0-alpha.1
Demo: https://qactivity.netlify.com/#/

@quasar/qpdfviewer v1.0.0-alpha.1 Release! https://github.com/quasarframework/app-extension-qpdfviewer/releases/tag/v1.0.0-alpha.1
This is the initial release of QPdfviewer
Demo here: https://qpdfviewer.netlify.com/#/

In case anyone wants to know how it is done: https://jsfiddle.net/Hawkeye64/noc64qr2/

@Ben-Hayat Ok, so I misread…I followed the herring instead of the bigger fish.

I think what you are looking for is a Quasar plugin:
https://quasar-framework.org/guide/app-plugins.html

Examples of plugins I use:

import AnimatedVue from 'animated-vue'

export default ({ Vue }) => {
  Vue.use(AnimatedVue)
}

import axios from 'axios'

export default ({ Vue }) => {
  Vue.prototype.$axios = axios
}

// batman's utility belt for javascript
import _ from 'lodash'

export default ({ Vue }) => {
  Vue.prototype._ = _
}

import moment from 'moment'

// leave the export, even if you don't use it
export default ({ Vue }) => {
  Vue.prototype.$moment = moment
}

// form validation
// See: https://www.npmjs.com/package/slug this project is dead
// now using dodoslug, a fork of node-slug
// See: https://github.com/dodo/node-slug
import slug from 'dodoslug'

slug.defaults.modes['mymode'] = {
  replacement: '-', // replace spaces with replacement
  symbols: true, // replace unicode symbols or not
  remove: /[._]/g, // (optional) regex to remove characters
  lower: true, // result in lower case
  charmap: slug.charmap, // replace special characters
  multicharmap: slug.multicharmap // replace multi-characters
}
slug.defaults.mode = 'mymode'

export default ({ Vue }) => {
  Vue.prototype.$slug = slug
}

@quasar/dotenv v1.0.0-beta.5 Release! https://github.com/quasarframework/app-extension-dotenv/releases/tag/v1.0.0-beta.5
Now will create your .env files for you (if you want), will not overwrite existing files. [based on new prompt]
Now will add to your .gitignore [based on new prompt]

https://github.com/quasarframework/app-extension-qscroller/releases/tag/v1.0.0-alpha.1

• Initial npm release

https://github.com/quasarframework/quasar-ui-qmediaplayer/releases/tag/v1.0.19

• fix: mobile-mode is broken (#107)
• fix: click event propagation issues
• fix: Fullscreen issues when Quasar AppFullscreen plugin is not installed
• fix: fullscreen issues when constraint is added by user (ie: max-width)

Congrats! Looks great!

and:

    toggleSettingsPopover: function () {
      this.displaySettingsMenu = !this.displaySettingsMenu
    },

I do it like this:

          <q-tab
            v-if="isLoggedIn && checkFeature('settings')"
            label="Settings <i class='fas fa-caret-down' />"
            name="settings"
            slot="title"
            icon="fas fa-cogs faa-pulse"
            class="faa-parent animated-hover"
            @click="toggleSettingsPopover()"
          >
            <q-popover v-model="displaySettingsMenu">
              <q-list item-separator link>

                <q-item
                  v-if="checkFeature('settings-system')"
                  to="settings-system"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-cog faa-pulse" />
                  </q-item-side>
                  System
                </q-item>

                <q-item
                  v-if="checkFeature('settings-users') && isAdmin()"
                  to="settings-users"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-user faa-pulse" />
                  </q-item-side>
                  Users
                </q-item>

                <q-item
                  v-if="checkFeature('settings-sites') && isAdmin()"
                  to="settings-sites"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-map-marker faa-pulse" />
                  </q-item-side>
                  Sites
                </q-item>

                <q-item
                v-if="checkFeature('settings-sam') && isAdmin()"
                  to="settings-sams"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-laptop faa-pulse" />
                  </q-item-side>
                  SAMs
                </q-item>

                <q-item
                  v-if="checkFeature('settings-hvr') && isAdmin()"
                  to="settings-hvrs"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-video faa-pulse" />
                  </q-item-side>
                  DCAMs/HVRs
                </q-item>

                <q-item
                  v-if="checkFeature('settings-ptz') && isAdmin()"
                  to="settings-ptzs"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile class="icon" icon="fas fa-ptz32 faa-pulse" />
                  </q-item-side>
                  PTZs
                </q-item>

                <q-item
                  v-if="checkFeature('settings-accessories') && isAdmin()"
                  to="settings-accessories"
                  replace
                  v-close-overlay
                  >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-cubes faa-pulse" />
                  </q-item-side>
                  Accessories
                </q-item>

                <q-item
                  v-if="checkFeature('settings-analytic-control') && isAdmin()"
                  to="settings-analytic-control"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-microchip faa-pulse" />
                  </q-item-side>
                  Analytic Control
                </q-item>

                <q-item
                  to="themes"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-adjust faa-pulse" />
                  </q-item-side>
                  Themes
                </q-item>

              </q-list>
            </q-popover>
          </q-tab>

@KevinYang @s-molinari
I must say I like a bit of challenge. I think the issue you were having before is you needed more than one tr element, but that is where the scope goes. So, I tried a different approach and put a div in with the header scope.
Also, notice the style="display: contents" on the div.
You can see the results here: https://jsfiddle.net/Hawkeye64/5y6rbn9u/46/

@KevinYang
You can use single back tick for inline and tripple back tick for rows.
Very similar to this: https://help.github.com/articles/creating-and-highlighting-code-blocks/

You might also be interested that Vue now has more Github stars than React: https://github.com/search?utf8=✓&q=repo%3Avuejs%2Fvue+repo%3Afacebook%2Freact+repo%3Aangular%2Fangular&type=Repositories&ref=advsearch&l=&l=

FYI, with the release of Vue 2.6 (now up to 2.6.2) the code had to be reworked with breaking changes (their release should have been Vue 3.0.0-beta-1). It’s taken a couple of days to be Vue 2.6 compliant, and even then, if the Vue guys make more fixes, we may also have to as we’re downstream.

https://github.com/quasarframework/app-extension-qflashcard/releases/tag/v0.0.1-alpha.12

1. There have been instances when Yarn borks everything up globally. If you haven’t hit it yet, then don’t worry about it until you do.
2. Yarn puts globals into it’s own location, thereby excluding use of Node Versioning toolsets, like NVM.

At work, we have 4.5.3, 5.0/5.1 and (upcoming) 6.0 versions of our product, each of versions are using different versions of Node and associated NPM packages, so I have to use NVM to manage all that.

These are great updates!

@quasar/qmarkdown v1.0.0-alpha.1 Release! https://github.com/quasarframework/app-extension-qmarkdown/releases/tag/v1.0.0-alpha.1
This is the initial release of QMarkdown.
Demo here: https://qmarkdown.netlify.com/#/

https://github.com/quasarframework/app-extension-qcalendar/releases/tag/v1.0.0

• feat(json): update QCalendar json api
• QCalendar is now v1 stable!