No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. tlloyduk
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 26
    • Best 3
    • Groups 0

    tlloyduk

    @tlloyduk

    4
    Reputation
    15
    Profile views
    26
    Posts
    0
    Followers
    0
    Following
    Joined Last Online
    Location Bristol, UK

    tlloyduk Follow

    Best posts made by tlloyduk

    • RE: Integrating thrid party component

      @pazarbasifatih This is what I did…

      Installed the @growthbunker/vueflags package

      quasar new boot flags - created a new boot file:

      import Vue from 'vue'
      import VueFlags from '@growthbunker/vueflags'
      
      Vue.use(VueFlags, {
        iconPath: '/flags'
      })
      

      Make sure you add the boot file to quasar.conf.js boot array.

      Created a new folder in /public called flags (created public if it doesn’t already exist, same level as src)

      From the Vueflags web site, downloaded the flags I wanted e.g gb.svg, es.svg, fr.svg and put them in public/flags

      You can then use <gb-flag code="es" size="mini" /> in your components. I wrapped it up into a Language Switcher component, e.g:

      772e5ccb-e1f6-412f-a3aa-a03179b5c891-image.png

      which uses this.$i18n.local to determine what flag to display in the q-btn-dropdown label slot.

      posted in Framework
      tlloyduk
      tlloyduk
    • RE: Access Capacitor API from store action ?

      Using the app alias worked, e.g.
      import { Plugins } from 'app/src-capacitor/node_modules/@capacitor/core'

      Thanks

      posted in Help
      tlloyduk
      tlloyduk
    • RE: How to support multiple environments

      Did anyone get a solution for dev, staging and production environments ?

      I had the idea of using quasar build -d (debug mode) as staging and quasar build as production, each with its own dist folder, and I set a DEPLOY_MODE env variable accordingly:

      build: {
            distDir: ctx.debug ? `dist/${ctx.modeName}-dev` : `dist/${ctx.modeName}`,
            env: {
              DEPLOY_MODE: ctx.prod && !ctx.debug ? 'PRODUCTION' : (ctx.prod && ctx.debug ? 'STAGING' : 'DEV')
            },
      

      Then in my boot file, I use process.env.DEPLOY_MODE to determine which keys to use in my production env file, since quasar/dotenv extension only seems to support two environments (side note: I saw someone committed some changes on github to support staging but it was then reverted)

      This works, but I wondered if anyone else had a more elegant solution ?

      posted in Help
      tlloyduk
      tlloyduk

    Latest posts made by tlloyduk

    • RE: [Solved] PWA force refresh when new version released?

      @Chris-0 awesome! would you add this as a component and then call it from App.vue or is there a best practice for where to position this in a Quasar project ?

      posted in Framework
      tlloyduk
      tlloyduk
    • RE: [SOLVED] Chrome (but not FF nor Safari) randomly fails PWA update

      I’ve suddenly started to get this after upgrading Quasar to latest - wondered if anyone had come up with a reliable solution since the last post ?

      
      Operating System - Windows_NT(10.0.19041) - win32/x64                                                                                                          
      NodeJs - 12.16.1                                                                                                                                               
                                                                                                                                                                     
      Global packages                                                                                                                                                
        NPM - 3.10.6                                                                                                                                                 
        yarn - 1.22.4                                                                                                                                                
        @quasar/cli - 1.1.3                                                                                                                                          
        @quasar/icongenie - Not installed                                                                                                                            
        cordova - Not installed                                                                                                                                      
                                                                                                                                                                     
      Important local packages                                                                                                                                       
        quasar - 1.15.10 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time                                          
        @quasar/app - 2.2.4 -- Quasar Framework local CLI                                                                                                            
        @quasar/extras - 1.10.2 -- Quasar Framework fonts, icons and animations                                                                                      
        eslint-plugin-quasar - Not installed                                                                                                                         
        vue - 2.6.12 -- Reactive, component-oriented view layer for modern web interfaces.                                                                           
        vue-router - 3.2.0 -- Official router for Vue.js 2                                                                                                           
        vuex - 3.6.0 -- state management for Vue.js                                                                                                                  
        electron - Not installed                                                                                                                                     
        electron-packager - Not installed                                                                                                                            
        electron-builder - Not installed                                                                                                                             
        @babel/core - 7.13.8 -- Babel compiler core.                                                                                                                 
        webpack - 4.44.2 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support l
       stuff.                                                                                                                                                        
        webpack-dev-server - 3.11.0 -- Serves a webpack app. Updates the browser on changes.                                                                         
        workbox-webpack-plugin - 6.1.2 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.   
        register-service-worker - 1.7.1 -- Script for registering service worker, with hooks                                                                         
        typescript - 4.2.2 -- TypeScript is a language for application scale JavaScript development                                                                  
        @capacitor/core - Not installed                                                                                                                              
        @capacitor/cli - Not installed                                                                                                                               
        @capacitor/android - Not installed                                                                                                                           
        @capacitor/ios - Not installed                                                                                                                               
                                                                                                                                                                     
      Quasar App Extensions                                                                                                                                          
        @quasar/quasar-app-extension-dotenv - 1.1.0 -- Load .env variables into your quasar project                                                                  ```
      posted in Framework
      tlloyduk
      tlloyduk
    • RE: Print preview won't show all rows of a table

      I ended up writing a little helper function.
      I took some sample code from @metalsadman https://codepen.io/metalsadman/pen/LYNzrEE?editors=1010 and changed it slightly

      printTable: function (props) {
            const headers = this.columns.map(col => this.$helpers.wrapCsvValue(col.label))
      
            const content = this.$refs.dataTable.filteredSortedRows.map(row => this.columns.map(col => this.$helpers.wrapCsvValue(
              typeof col.field === 'function'
                ? col.field(row)
                : row[typeof col.field === 'undefined' ? col.name : col.field],
              col.format
            )))
      
            this.$helpers.printWindow(headers, content, this.$t('page.title'))
          }
      

      And then my helper function takes the table content and uses standard HTML table to render it in a pop-up and calls the window.print()

      const printWindow = function (headers, data, title) {
        var printWindow = window.open('', '', 'height=600,width=800')
        printWindow.document.write(`<html><head><title>${title}</title>`)
        printWindow.document.write('<style type = "text/css">')
        printWindow.document.write('.q-table {')
        printWindow.document.write('width: 100%;')
        printWindow.document.write('max-width: 100%;')
        printWindow.document.write('border-collapse: collapse;')
        printWindow.document.write('margin: 25px 0;')
        printWindow.document.write('font-size: 0.9em;')
        printWindow.document.write('font-family: sans-serif;')
        printWindow.document.write('box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);')
        printWindow.document.write('}')
        printWindow.document.write('.q-table th, td {')
        printWindow.document.write('padding: 12px 15px;')
        printWindow.document.write('}')
        printWindow.document.write('.q-table tbody tr {')
        printWindow.document.write('border-bottom: 1px solid #dddddd;')
        printWindow.document.write('}')
        printWindow.document.write('.q-table thead tr {')
        printWindow.document.write('text-align: left;')
        printWindow.document.write('}')
        printWindow.document.write('</style>')
        printWindow.document.write('</head>')
      
        printWindow.document.write('<body>')
        printWindow.document.write('<table class="q-table">')
        printWindow.document.write('<thead>')
        printWindow.document.write('<tr>')
        for (const header of headers) {
          if (header !== 'Actions') {
            printWindow.document.write(`<th>${header}</th>`)
          }
        }
        printWindow.document.write('</tr>')
        printWindow.document.write('</thead>')
        printWindow.document.write('<tbody>')
        for (const row of data) {
          printWindow.document.write('<tr>')
          for (const col of row) {
            printWindow.document.write(`<td>${col}</td>`)
          }
          printWindow.document.write('</tr>')
        }
        printWindow.document.write('</tbody>')
        printWindow.document.write('</table>')
        printWindow.document.write('</body>')
      
        printWindow.document.write('</html>')
        printWindow.document.close()
      
        const afterPrintHandler = (function (vm) {
          return function () {
            printWindow.close()
          }
        }(this))
        printWindow.onafterprint = afterPrintHandler
        printWindow.print()
      }
      

      Seems pretty re-usable for all my q-table’s and prints the filtered content too. Maybe someone has a better approach or way to improve it

      posted in Help
      tlloyduk
      tlloyduk
    • RE: Print preview won't show all rows of a table

      Also stumbled across this and wondered if anyone found a solution

      posted in Help
      tlloyduk
      tlloyduk
    • RE: Integrating thrid party component

      @pazarbasifatih This is what I did…

      Installed the @growthbunker/vueflags package

      quasar new boot flags - created a new boot file:

      import Vue from 'vue'
      import VueFlags from '@growthbunker/vueflags'
      
      Vue.use(VueFlags, {
        iconPath: '/flags'
      })
      

      Make sure you add the boot file to quasar.conf.js boot array.

      Created a new folder in /public called flags (created public if it doesn’t already exist, same level as src)

      From the Vueflags web site, downloaded the flags I wanted e.g gb.svg, es.svg, fr.svg and put them in public/flags

      You can then use <gb-flag code="es" size="mini" /> in your components. I wrapped it up into a Language Switcher component, e.g:

      772e5ccb-e1f6-412f-a3aa-a03179b5c891-image.png

      which uses this.$i18n.local to determine what flag to display in the q-btn-dropdown label slot.

      posted in Framework
      tlloyduk
      tlloyduk
    • RE: How to support multiple environments

      @tlloyduk replying to myself here, but I am not sure qenv is vastly different to what I proposed so will stick to my original plan!

      posted in Help
      tlloyduk
      tlloyduk
    • RE: How to support multiple environments

      ok will do

      posted in Help
      tlloyduk
      tlloyduk
    • RE: How to support multiple environments

      Did anyone get a solution for dev, staging and production environments ?

      I had the idea of using quasar build -d (debug mode) as staging and quasar build as production, each with its own dist folder, and I set a DEPLOY_MODE env variable accordingly:

      build: {
            distDir: ctx.debug ? `dist/${ctx.modeName}-dev` : `dist/${ctx.modeName}`,
            env: {
              DEPLOY_MODE: ctx.prod && !ctx.debug ? 'PRODUCTION' : (ctx.prod && ctx.debug ? 'STAGING' : 'DEV')
            },
      

      Then in my boot file, I use process.env.DEPLOY_MODE to determine which keys to use in my production env file, since quasar/dotenv extension only seems to support two environments (side note: I saw someone committed some changes on github to support staging but it was then reverted)

      This works, but I wondered if anyone else had a more elegant solution ?

      posted in Help
      tlloyduk
      tlloyduk
    • RE: Disable hover effect on markup table

      Nice trick

      posted in Framework
      tlloyduk
      tlloyduk
    • RE: Integrating thrid party component

      @Quasarman cool! were you able to use these flags as part of icon property, e.g. for q-btn-dropdown ?

      posted in Framework
      tlloyduk
      tlloyduk