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. krsyoung
    • Profile
    • Following 0
    • Followers 1
    • Topics 14
    • Posts 58
    • Best 11
    • Groups 0

    krsyoung

    @krsyoung

    14
    Reputation
    610
    Profile views
    58
    Posts
    1
    Followers
    0
    Following
    Joined Last Online
    Location Canada

    krsyoung Follow

    Best posts made by krsyoung

    • Multiple Layouts

      Hello, I’m experimenting with Quasar to build an authenticated app. The basic idea is to have the initial login screen (available to everyone, no header / footer) followed by some number of authenticated screens (header / nav / footer).

      I have two layouts, one with nothing (i.e. for the login screen) and a second that would then be applied to all authenticated screens.

      The problem is I can’t figure out how to switch between them. Any guidance on how I would apply the ‘blank’ layout to the login view and the ‘default’ layout to all others?

      Thanks!

      posted in Help
      krsyoung
      krsyoung
    • RE: q-tabs with named routes / parameters

      Well not sure what I was doing wrong before the the following works!

          <!-- Navigation Tabs -->
          <q-tabs slot="navigation">
            <q-tab icon="alarm" :route=detailsPath exact append>Details</q-tab>
          </q-tabs>
      

      In the data method I simply calculate the correct path (not sure how to get the JS formatting to work).

        data () {
          return {
            detailsPath: '/app/show/' + this.$route.params.id
          }
        }
      
      posted in Help
      krsyoung
      krsyoung
    • RE: [Solved] Cordova Black Screen

      Thanks for all of the ideas @LaurentPayot

      The run and emulate commands perform the same thing for me (when I don’t have a device plugged in).

      I changed the graphics from Hardware to Software (might be the same as -gpu off, I couldn’t figure out how to get that to work with the Cordova CLI). And, low and behold!! I have a (very very slow) visible screen again!

      I’ll have to debug what’s going on with HAX / Graphics, but definitely not a Quasar issue :-). Thanks so much @rstoenescu and @LaurentPayot for helping me out!

      posted in Help
      krsyoung
      krsyoung
    • RE: [Solved] Modal with form

      So, sometimes you get lucky 🙂

      I just put an input element into the modal and it works beautifully. Not sure if that was a “duh” moment or not but it works fantastic!

      posted in Help
      krsyoung
      krsyoung
    • RE: Handle browser hard refresh

      Cool, thanks @eleina! I’ll investigate going down that path. I was also thinking of trying to just warn the user for starters (i.e. are you sure you want to refresh the page, you’ll lose any unsaved work). Main reason being the app I’m working on has data that is a little sensitive to persist.

      Appreciate the suggestion, will let you know how it goes.

      posted in Help
      krsyoung
      krsyoung
    • Quasar minification with babili?

      Hey,

      Just checking if anybody has tried making use of Babili for minification? I have an app that is (trying to) using OCR via tesseract.js. Works ok except I think the tesseract.js code is ES6 and blows up the default Quasar Webpack UglifyJS step.

      Babili seems to be a possible way to get around this except it is super slow and seems to produce output that doesn’t actually run (but no errors!).

      Just checking if anybody else has experience with this / has had luck when importing modules that won’t process with UglifyJS.

      Thanks!

      posted in Help
      krsyoung
      krsyoung
    • RE: [Solved] Q-toolbar dropdown menu possible ?

      Slam dunk, thanks a million @Hawkeye64! I just switched the q-tab to a q-btn for my use case and it is working beautifully.

      posted in Help
      krsyoung
      krsyoung
    • RE: Alignment of q-toolbar

      For the record this strategy works perfectly (using 0.17.10). I had a similar layout need due to having a large search input directly after the title:

      [Logo | Title | Search | Profile]

      Code looks like:

            <q-toolbar>
              <q-btn @click="$router.push('/')" flat round dense icon="local_pizza" />
              <q-toolbar-title shrink class="q-mr-md">
                Pizza
                <span slot="subtitle">and Wings!</span>
              </q-toolbar-title>
      
              <q-search v-model="terms" inverted color="none" class="search">
                <q-autocomplete @search="search" @selected="selected" />
              </q-search>
      
              <div class="col"></div> <!-- eat up all the free space -->
              <q-btn
                v-if="isAuthenticated"
                flat
                round
                dense
                icon="person"
                @click="toggleSettingsPopover()"
                >
               ....
              </q-btn>
            </q-toolbar>
      
      posted in Help
      krsyoung
      krsyoung
    • RE: Image in top dropdown menu ?

      Not perfect, but I’ve done something similar but with a q-chip component. I’m actually using it the q-toolbar for my layout:

      <q-chip
                v-if="isAuthenticated"
                avatar="https://api.adorable.io/avatars/285/abott@adorable.png"
                color="primary"
                @click="toggleSettingsPopover()">
                <q-popover v-model="displaySettingsMenu">
                  <q-list item-separator link>
                    ....
                  </q-list>
                </q-popover>
              </q-chip>
      

      with:

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

      Ideally there would be an option to add an avatar / image to a button or at least move the avatar on the chip to the RHS (like icon-right) – then I could do {{user.name}} [avatar].

      posted in Help
      krsyoung
      krsyoung
    • RE: How to detect completion of q-stepper?

      Ok thanks guys, sounds like my current approach is the “best” approach.

      Here is the full reference for others who might be in the same boat:

      <template>
        <q-page padding>
          <!-- content -->
          <q-stepper ref="stepper" v-model="currentStep">
            <q-step default title="Welcome" name="welcome">
              <h5 class="q-mt-xs q-mb-md">Welcome</h5>
            </q-step>
      
            <q-step title="Pizza" name="pizza">
              <pizza ref="pizza"></pizza>
            </q-step>
      
            <q-step title="Wings" name="wings">
              <wings ref="wings"></wings>
            </q-step>
      
            <q-step title="Done" name="done">
              <p>Enjoy!</p>
            </q-step>
      
            <!-- custom nav to deal with done -->
            <q-stepper-navigation>
              <q-btn
                flat
                @click="$refs.stepper.previous()"
                label="Back"
              />
              <q-btn
                v-if="currentStep !== 'done'"
                @click="$refs.stepper.next()"
                label="Next"
              />
              <q-btn
                v-if="currentStep === 'done'"
                @click="finish()"
                label="Done"
              />
            </q-stepper-navigation>
            <q-inner-loading :visible="inProgress" />
          </q-stepper>
        </q-page>
      </template>
      
      <script>
      import Pizza from '../components/Pizza'
      import Wings from '../components/Wings'
      
      export default {
        name: 'Order',
        data () {
          return {
            currentStep: 'welcome',
            inProgress: false
          }
        },
        components: {
          Pizza,
          Wings
        },
        watch: {
          currentStep (to, from) {
            this.transition(from, to)
          }
        },
        methods: {
          transition (from, to) {
            if (from === 'pizza') {
              console.log('ajax to save the pizza toppings')
              this.inProgress = true
              this.$store.dispatch('pizza/update', pizza)
                .then(response => {
                  this.inProgress = false
                  this.currentStep = to
                })
            } else {
              this.currentStep = to
            }
          },
          finish () {
            console.log('ajax to submit the order')
            this.$store.dispatch('order/create', pizza)
              .then(response => {
                this.$router.push('/')
              })    
          }
        }
      }
      </script>
      
      posted in Help
      krsyoung
      krsyoung

    Latest posts made by krsyoung

    • RE: Any plan for a "Kanban Board" component?

      The name sounds suspicious but I haven’t actually used it myself: https://github.com/BrockReece/vue-kanban

      I’ve built something similar in my app using Quasar components (cards mainly) and vue-smooth-dnd - https://github.com/kutlugsahin/vue-smooth-dnd. Works well but not quick to set-up.

      This is something I haven’t spent enough time on, but basically figuring out how to organize and give back Quasar friendly components to the community.

      Hopefully somebody else has more experience with Kanban boards for you @Ben-Hayat

      posted in Framework
      krsyoung
      krsyoung
    • RE: QPopover as Dropdown Menus (on hover)

      For the record the solution is to use the .native modifier.

      @mouseover.native="toggleSettingsPopover()"
      
      posted in Help
      krsyoung
      krsyoung
    • RE: Razvan on vacation for ~ a week

      Enjoy @rstoenescu !

      posted in Announcements
      krsyoung
      krsyoung
    • RE: How to add MathQuill

      Any chance you can share the related code / the steps you took to try and add it? Is there a specific error happening?

      posted in CLI
      krsyoung
      krsyoung
    • How to drop console statements in production

      Hello,

      I’m trying to find a way to remove all console.log statements from my production build.

      On a previous version of quasar I had updated the webpack configuration for UglifyJsPlugin to drop console statements with drop_console: true.

      What approach are folks talking with the latest version in terms of managing logging in production (i.e. dropping debug or just doing another way).

      Thanks!

      posted in Help
      krsyoung
      krsyoung
    • RE: How to detect completion of q-stepper?

      Ok thanks guys, sounds like my current approach is the “best” approach.

      Here is the full reference for others who might be in the same boat:

      <template>
        <q-page padding>
          <!-- content -->
          <q-stepper ref="stepper" v-model="currentStep">
            <q-step default title="Welcome" name="welcome">
              <h5 class="q-mt-xs q-mb-md">Welcome</h5>
            </q-step>
      
            <q-step title="Pizza" name="pizza">
              <pizza ref="pizza"></pizza>
            </q-step>
      
            <q-step title="Wings" name="wings">
              <wings ref="wings"></wings>
            </q-step>
      
            <q-step title="Done" name="done">
              <p>Enjoy!</p>
            </q-step>
      
            <!-- custom nav to deal with done -->
            <q-stepper-navigation>
              <q-btn
                flat
                @click="$refs.stepper.previous()"
                label="Back"
              />
              <q-btn
                v-if="currentStep !== 'done'"
                @click="$refs.stepper.next()"
                label="Next"
              />
              <q-btn
                v-if="currentStep === 'done'"
                @click="finish()"
                label="Done"
              />
            </q-stepper-navigation>
            <q-inner-loading :visible="inProgress" />
          </q-stepper>
        </q-page>
      </template>
      
      <script>
      import Pizza from '../components/Pizza'
      import Wings from '../components/Wings'
      
      export default {
        name: 'Order',
        data () {
          return {
            currentStep: 'welcome',
            inProgress: false
          }
        },
        components: {
          Pizza,
          Wings
        },
        watch: {
          currentStep (to, from) {
            this.transition(from, to)
          }
        },
        methods: {
          transition (from, to) {
            if (from === 'pizza') {
              console.log('ajax to save the pizza toppings')
              this.inProgress = true
              this.$store.dispatch('pizza/update', pizza)
                .then(response => {
                  this.inProgress = false
                  this.currentStep = to
                })
            } else {
              this.currentStep = to
            }
          },
          finish () {
            console.log('ajax to submit the order')
            this.$store.dispatch('order/create', pizza)
              .then(response => {
                this.$router.push('/')
              })    
          }
        }
      }
      </script>
      
      posted in Help
      krsyoung
      krsyoung
    • How to detect completion of q-stepper?

      I see in previous versions of Quasar there used the be a @finish event (see http://v0-13.quasar-framework.org/components/stepper.html).

      This is no longer available. Curious if others have an approach to dealing with routing (or anything) once the user clicks “Done” on the last step?

      My current approach is as follows:

            <q-stepper-navigation>
              <q-btn
                flat
                @click="$refs.stepper.previous()"
                label="Back"
              />
              <q-btn
                v-if="currentStep !== 'done'"
                @click="$refs.stepper.next()"
                label="Next"
              />
              <q-btn
                v-if="currentStep === 'done'"
                @click="finish()"
                label="Done"
              />
            </q-stepper-navigation>
      
      posted in Help
      krsyoung
      krsyoung
    • RE: [Solved] Q-toolbar dropdown menu possible ?

      I ended up modifying my approach again slightly to incorporate the ability to include an avatar into the “button”. Specific details are available here: https://forum.quasar-framework.org/topic/2602/image-in-top-dropdown-menu/2

      The short of it was to use a q-chip with avatar set to the image and no content – then use the clever popover approach above.

      posted in Help
      krsyoung
      krsyoung
    • RE: Image in top dropdown menu ?

      Not perfect, but I’ve done something similar but with a q-chip component. I’m actually using it the q-toolbar for my layout:

      <q-chip
                v-if="isAuthenticated"
                avatar="https://api.adorable.io/avatars/285/abott@adorable.png"
                color="primary"
                @click="toggleSettingsPopover()">
                <q-popover v-model="displaySettingsMenu">
                  <q-list item-separator link>
                    ....
                  </q-list>
                </q-popover>
              </q-chip>
      

      with:

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

      Ideally there would be an option to add an avatar / image to a button or at least move the avatar on the chip to the RHS (like icon-right) – then I could do {{user.name}} [avatar].

      posted in Help
      krsyoung
      krsyoung
    • RE: Alignment of q-toolbar

      For the record this strategy works perfectly (using 0.17.10). I had a similar layout need due to having a large search input directly after the title:

      [Logo | Title | Search | Profile]

      Code looks like:

            <q-toolbar>
              <q-btn @click="$router.push('/')" flat round dense icon="local_pizza" />
              <q-toolbar-title shrink class="q-mr-md">
                Pizza
                <span slot="subtitle">and Wings!</span>
              </q-toolbar-title>
      
              <q-search v-model="terms" inverted color="none" class="search">
                <q-autocomplete @search="search" @selected="selected" />
              </q-search>
      
              <div class="col"></div> <!-- eat up all the free space -->
              <q-btn
                v-if="isAuthenticated"
                flat
                round
                dense
                icon="person"
                @click="toggleSettingsPopover()"
                >
               ....
              </q-btn>
            </q-toolbar>
      
      posted in Help
      krsyoung
      krsyoung