I have had several problems with flow.
I would like to access the localStorage (plugin) inside router / index.js for example.

But the quasar load Router and then loads the Plugins, thus being Vue.localStorage be undefined :/.

plugins/localStorage.js

import VueLocalStorage from 'vue-localstorage'

export default ({ app, router, Vue }) => {

  Vue.use(VueLocalStorage)

}

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import routes from './routes'

Vue.use(VueRouter)

const Router = new VueRouter({
  /*
   * NOTE! Change Vue Router mode from quasar.conf.js -> build -> vueRouterMode
   *
   * If you decide to go with "history" mode, please also set "build.publicPath"
   * to something other than an empty string.
   * Example: '/' instead of ''
   */

  // Leave as is and change from quasar.conf.js instead!
  mode: process.env.VUE_ROUTER_MODE,
  base: process.env.VUE_ROUTER_BASE,
  scrollBehavior: () => ({ y: 0 }),
  routes
})

Router.beforeEach((to, from, next) => {
  Vue.localStorage.set('teste', 'teste')
  next()
})

export default Router

I need to access localStorage to check if a saved token exists, and if there is user information look for on the server.

@rstoenescu Oh, my bad.

I had added in components. Now I’ve got it, and it’s working.

Many thanks for the support offered

<@singularity>-<⎇ master>-<±>-> quasar -v
0.15.11

Resolve: background: url(../statics/background/exportada1.png);

I found the way the documentation (http://quasar-framework.org/guide/app-handling-assets.html) is confusing. I do not quite understand how I should use the assets, and how to put them in the background. It is giving a mistake and it seems from the webpack, but I do not know the right one.

<template>
  <div class="background-index">
    <q-page class="flex flex-center">
      <div class="self-end full-width">

        <transition-group
          appear
          enter-active-class="animated fadeIn"
          leave-active-class="animated fadeOut"
        >

          <q-btn class="full-width q-mb-sm q-mx-lg" color="primary" label="Entrar" key="login-button" @click="$router.push('/user/login')" />
          <q-btn class="full-width q-mb-md q-mx-lg" color="faded" label="Faça parte" key="singup-button" @click="$router.push('/user/register')" />
        </transition-group>
      </div>
    </q-page>
  </div>
</template>

<style>
.background-index {
  background: url(./assets/exportada1.png);
}
</style>

<script>
export default {
  name: 'PageIndex'
}
</script>

Erro:

@rstoenescu Investigating further with a user at discordapp we came to the following conclusion.

https://github.com/vuejs/vue/issues/7028

We do not know how the Action Sheet works underneath the cloths, but probably this security in the browser that is preventing the dialog from appearing.

I’ve even tried adding the Action Sheet by component, but it did not work. But by btn it works normally. If you have any other solution, just say so.

Edit:
Probably the quasar is doing something that changes the behavior of an interaction, or something along those lines. I do not know, because I do not know Quasar in depth.

Up

Because of the spam posted in the category.

I’m trying to make a custom upload, because what’s in Quasar would not answer me.
Basically what I want is to click on the ActionSheet item, and it will open the upload dialog.
But this does not happen. When the click() event is triggered, the dialog does not open. This does not happen when I change the ActionSheet for a btn. But I do not want it to be btn, but actionsheet.

<input type="file" accept="image/*" ref="file" @click="console" />

    updatePhotoWithAction () {
      this.$q.actionSheet({
        title: 'Alterar foto',
        actions: [
          {
            label: 'Carregar nova',
            icon: 'file upload',
            color: 'blue',
            handler: () => {
              this.$refs.file.click()
              console.log('DOM', this.$refs.file)
              // OPEN MODAL
              // this.opened = true
            }
          },
          {},
          {
            label: 'Remover foto',
            icon: 'delete',
            color: 'negative',
            handler: () => {
              this.$q.notify('Deleted Article')
            }
          }
        ]
      })
    }

this.$refs.file exists normally. Even the DOM is picked up normally, and the event fired. The problem is with the dialog itself.

The message “Event click() of the triggered input, but does not open the dialog.” appears because I logged in to the @click = "console" of the input file element.

Before they ask. The upload of the quasar does not answer, because I want it to use the ActionSheet to fetch the image, and then open a modal with the croopie.

@rstoenescu said in qPageSticky to fix header/footer?:

@danielsalles Hi, you’re missing out on a lot that QLayout can do for you. Check out the demo and play with the “view” prop

A simple reveal true solved my problem.

Thank you!

I’m trying to keep the header/footer always on my screen. And after some research on the documentation, I saw that q-page-sticky could solve my problem. But I guess it was not what I expected.

I wish the header/footer simply stays on the screen all the time, and the scroll only happens on the q-page-container. Do you understand?

<template>
<q-page-sticky expand position="bottom">
  <q-layout-footer>
    <q-tabs class="shadow-2" align="justify">
      <q-route-tab to="/" exact slot="title" icon="search" label="Buscar" />
      <q-route-tab to="/" exact slot="title" icon="all inclusive" label="Descobrir" />
      <q-route-tab to="/" exact slot="title" icon="shopping basket" label="Pedidos" />
      <q-route-tab to="/main/account" exact slot="title" icon="person" label="Conta" />
    </q-tabs>
    </q-layout-footer>
</q-page-sticky>
</template>

After using this code, my footer has created a strange margin.

I wanted to know if anyone ever had the experience of working with Quasar with Sentry to catch errors.

Which practice would you recommend?

But how does someone solve this problem?