thank you all problem solved successfully

$ npm link @quasar/cli

i’m use categories in many pages so i get it on create and store it

	let payload = {
	id:category,
	category:categories[category]			
				}
		payload.category.id=category

and i display it like this

<select v-model="category" class="form-c" >
    <option v-for="option in categories" v-bind:value="option.id">
        {{ option.name_en }}
    </option>
</select>

but i want to use qselect

i want to add more fields by user as he want
and store it as an array to firestore

i want to display categories in dropdown list
how to get it from store and loop the it in options

@dobbel
what this error mean ?

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

(found in <Root>)

vue.runtime.esm.js?5593:1888 Error: [vuex] do not mutate vuex store state outside mutation handlers.

i am using firebase to quasar admin panel
and every user have roles
how to store this roles and every change in firebase update the store

what is the wrong with this

i want to check if the user want to go to landing page let him go
else if the admin want to go to admin panel must go to login
else if the admin logged in he can go to any where

every thing is okay but when the user go to landing page he get a white page no content

router.beforeEach((to,from,next) => {
  let loggedIn =LocalStorage.getItem('loggedIn')

  if(to.path == '/'){
    next('/')

  }else if(!loggedIn && to.path !== '/auth'){
    next('/auth')

  }else if (loggedIn && to.path =='/auth'){
    next('/admin')

  }else{
    next()

  }

})

const routes = [
  {
    path: '/',
    component: () => import('layouts/Layout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: '/auth', component: () => import('pages/PageAuth.vue') }
    ]
  },
  {
    path: '/admin',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/admin/Index.vue') }
    ]
  },
  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes

vue-router.esm.js?85f8:2128 RangeError: Maximum call stack size exceeded
    at parsePath (vue-router.esm.js?85f8:469)
    at normalizeLocation (vue-router.esm.js?85f8:999)
    at Object.match (vue-router.esm.js?85f8:1493)
    at VueRouter.match (vue-router.esm.js?85f8:2741)
    at HTML5History.transitionTo (vue-router.esm.js?85f8:2082)
    at HTML5History.push (vue-router.esm.js?85f8:2414)
    at eval (vue-router.esm.js?85f8:2184)
    at eval (router-auth.js?8dc1:10)
    at iterator (vue-router.esm.js?85f8:2169)
    at step (vue-router.esm.js?85f8:1895)

and is this a secure way ?

@dobbel
i’m trying but nothing is working

@dobbel thank you

@dobbel
this is the code
https://github.com/anas-aw/quasar-rlt

@dobbel Yes, I have read it

and yes when reload the page the language still arabic but the page change to ltr

which part of code you want to see ?