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!

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
    }
  }

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!

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!

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.

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!

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.

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>

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].

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>

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

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

@mouseover.native="toggleSettingsPopover()"

Enjoy @rstoenescu !

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

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!

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>

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>

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.

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].

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>