Super! Thanks!! Cannot wait v0.14!

Super! Waiting here …

Indeed. It should not happen. I finally traced back to another block of code where text was used. After fixing that, it is all good. Thanks.

The working version for others future reference::

export default ({ router, store }) => {
  router.beforeEach((to, from, next) => {
    const loggedIn = store.getters['user/getLoggedIn']
    const guestRoutes = ['/', '/login', '/suport'] // guests route

    if (!loggedIn && !guestRoutes.includes(to.path)) {
      next('/login')
    } else {
      next()
    }
  })
}

@realtebo Look into Cordova. (Note this is after you wrap the quasar project with Cordova and open via Xcode. I did a few years ago. You need to change some files in Xcode.)

Never mind. After I moved the images to /public, all is working. But still, why?? Note though: this is a newly setup dev environment (node + quasar cli). Something must have changed. It is simply ridiculous that such a simple thing does not work.

This is one of those days that nothing works. Am I out of mind??? Why? The first image won’t show but the second does.

<template>
  <q-page class="flex flex-center">
    <q-img :src="imgLink" style="width: 200px" />
    <q-img src="~assets/images/grace-1.png" style="width: 200px" />
  </q-page>
</template>

<script>
export default {
  name: 'PageIndex',
  data () {
    return {
      imgLink: '~assets/images/grace-1.png'
    }
  }
}
</script>

The working version for others future reference::

export default ({ router, store }) => {
  router.beforeEach((to, from, next) => {
    const loggedIn = store.getters['user/getLoggedIn']
    const guestRoutes = ['/', '/login', '/suport'] // guests route

    if (!loggedIn && !guestRoutes.includes(to.path)) {
      next('/login')
    } else {
      next()
    }
  })
}

@metalsadman Of course!! Thank you. router-auth.js is a boot file that I added to check routes authentications). // Your tip on using Vuex in other .js files really helped!

Thank you @metalsadman

Here is /src/store/index.js

let store = null

export default function () {
  store = new Vuex.Store({
    modules: {
      user
    },
    plugins: [createPersistedState()], // to persist

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEV
  })

  return store
}

export { store }

In another router-auth.js, I have

import { store } from 'src/store'

console.log(':: ROUTER-AUTH ::')
console.log(store)

It shows store null! // I just realized that the router-auth.js is a root file!! Could that be the reason? I tested your method in a regular .js file and it works. How can we let the router-auth.js boot after the store is created? Thank you!

How to use vuex (like this.$store.getters …) in a .js file in the project as this.$store won’t work any more outside the vue component? I tried this https://stackoverflow.com/questions/63177298/call-vuex-getters-from-another-javascript-file but the getters returns a literal code.

BTW, router.push({ name: 'dashboard' }) will throw a promise error but this will pass:

      router.push({
          path: '/dashboard'
        }, () => { })

Thanks. It did not but it inspired me. (Also, they were in a router view. The outside layout messes it up. This worked:

<div class="row q-col-gutter-md q-pt-md">
      <div class="col-xs-12 col-sm-6  col-md-6">
        <q-card style="height: 200px">
          <q-card-section dense class="bg-primary text-center text-white" >
            <div class="text-h6">card 1 </div>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6">
        <q-card style="height: 200px">
          <q-card-section dense class="bg-primary text-center text-white" >
            <div class="text-h6">card 2</div>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-12">
        <q-card style="height: 200px">
          <q-card-section dense class="bg-primary text-center text-white" >
              <div class="text-h6">card 3</div>
            </q-card-section>
        </q-card>
      </div>
    </div>

I worked on the exact same problem. I got this to work:

<q-scroll-area
              ref="first"
              style="height: 330px"
              :delay="350"
              @scroll="onScrollFirst"
            >
 // your div for chat messages here

Then, define methods:

scroll (source, position) {
      this.$refs[source].setScrollPosition(position)
    },

    onScrollFirst ({ verticalPosition }) {
      this.position = verticalPosition + 200
      // this.scroll('first', verticalPosition + 150)
      // console.log(this.position)
    },

At the time you enter/get a message, update the position variable:

        this.scroll('first', this.position), 500)

You need to adjust the height of your components (I used 350 …)