Thank you so much @patryckx, It works like a charm.

I hope it is useful for other Quasar Developers.

@beets Thank you for the tips.

@dobbel

I created a new app and then copied all my pages, store, etc from my app to the new app but on Ipad I have the same problem.

However even if Quasar is update to the new version, the complie messages differs between the app.

Old app

Build mode........ spa
Pkg quasar........ v1.14.7
Pkg @quasar/app... v1.9.6
Debugging......... no
Publishing........ no
Modern build...... no (legacy ES5); use "--modern" param for ES6+

NewApp

Build mode........ spa
Pkg quasar........ v1.14.7
Pkg @quasar/app... v2.1.13
Debugging......... no
Publishing........ no
Transpiled JS..... yes (Babel) - includes IE11 support

Do you know why ?

Thanks

@dobbel

I’ve created the new app and when I run it on Ipad the text of the first page is aligned on the left but is visible.

However I’ve noticed that there are some difference when I build the app - the new app sends these msgs during the build process

Configured browser support (at least 89.01% of global marketshare):
 · Chrome for Android >= 87
 · Firefox for Android >= 83
 · Android >= 81
 · Chrome >= 77
 · Edge >= 84
 · Firefox >= 75
 · IE >= 11
 · iOS >= 10.3
 · Opera >= 68
 · Safari >= 11

 App · Reading quasar.conf.js
 App · Transpiling JS (Babel active) - includes IE11 support
 App · Extending SPA Webpack config
 App · Cleaned build artifact: "C:\weborder\ex\test\dist\spa"
 App · Generating Webpack entry point
 App · Compiling with Webpack...

but my app send only these and I think thet the problem is the differrences into the quasar.conf.js so the IE11 support is not activated

App · Reading quasar.conf.js
App · Generating legacy js code (ES5); use "--modern" param for ES6+
App · Extending SPA Webpack config
App · Cleaned build artifact: "C:\weborder\weborderapp\dist\spa"
App · Generating Webpack entry point
App · Compiling with Webpack...

Into each pakake.json files I have these browser list configuration

"browserslist": [
   "ie >= 11",
   "last 10 Chrome versions",
   "last 10 Firefox versions",
   "last 4 Edge versions",
   "last 7 Safari versions",
   "last 8 Android versions",
   "last 8 ChromeAndroid versions",
   "last 8 FirefoxAndroid versions",
   "last 10 iOS versions",
   "last 5 Opera versions"
 ],

@dobbel
No I have these problems with Edge too.

I have wrote that Edge is updated to the latest version only because for Chrome and Safari there are no longer updates for this version of Ios while Edge continues to be updated.

Thank you for your answer.

Hi all,
sorry for the question I know that version 10.3.3 is out of date but i would like to know if other Quasar Users have encountered this problem.

In the routes.js of my SPA application I have these commands and everything works fine on Windows, Android, but on Ipad with IOS 10.3.3 the login page is never displayed.

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/login.vue'),
        meta: { requiresAuth: false }
      },
      {
        path: '/login',
        component: () => import('pages/login.vue'),
        meta: { requiresAuth: false }
      },
      {
        path: '/index',
        component: () => import('pages/InitPage.vue'),
        meta: { requiresAuth: true }
      },
      {
        path: '/customer',
        component: () => import('pages/Customer.vue'),
        meta: { requiresAuth: true }
      },
      {
        path: '/order',
        component: () => import('pages/Order.vue'),
        meta: { requiresAuth: true }
      },
      {
        path: '/orderlist',
        component: () => import('pages/Orderlist.vue'),
        meta: { requiresAuth: true }
      }
    ]
  }
]

When I access the application I am unable to perform any operation and it seems that it is waiting for the login and psw but the page displays the menu on the left (that run correctly) but in the center the request form is not displayed.

Please note that to avoid problems on this Ipad I use the last version of Edge browser.

Thanks

@dobbel

My goal is to have the ability to check if I must visualize an item menu depending on the user rigths.

For example, if in the EssentialLink array if I add those items how can conditionally hide the first item if the user rights do not allow you to perform the function “Customers” ?

  this.essentialLinks.push({
          title  : 'Customers',
          caption: 'Customers list',
          icon   : 'person',
          to     : '/customers',
          visible: true
   })
  this.essentialLinks.push({
          title  : 'New Order',
          caption: 'Inserrt a new order',
          icon   : 'description',
          to     : '/order'
   })

@dobbel

Sorry for the delay.

I meant the ability to pass the essentiallink item to the computed method “authenticated”. Is possible ?

@dobbel

Thanks for the answer and for your interesting solution.
Is possibile to pass the item processed to the computed method ?

In MyLayout.vue I use EssentialLink component to manage some menu items.

In the EssentialLink component I have create a new property “visible” to visualize or not the items.

<template>
  <q-item
    clickable
    :to="to"
    v-if="visible"
  >
   ......
    icon: {
      type: String,
      default: ''
    },
      visible: {
      type: Boolean,
      default: true
    }

In the login.vue page I should change the “visible” property of some of the Essentiallink elements when the user logs in, to disable or enable some features.

Is it possible to access the MainLayout.vue array where the elements used by Essentiallink are stored from the login.vue page or call a method present in the MainLayout.vue ?

Thank you very much.

Hi all,
I have created a simple function to show a dialog that I use into some methods.

The function that is before the “export default” section is this

async function ConfirmDialog(title, msg) {
   if (await new Promise(resolve => this.$q.dialog({
     title: title,
     message: msg,
     ok: {
           push: true,
           label: 'Yes',
           tabindex: 0
         },
     cancel: {
         push: true,
         label: 'No',
         tabindex: 1
       },
     persistent: true,
     focus: 'cancel'
   }).onOk(() => resolve(true)).onCancel(() => resolve(false)))) {
     return true
  } else {
    return false
  }
}

If I call this function inside a method, the fuction isn’t executed and the dialog isn’t show (with or without async await parameter).

methods: {

 async ValidateOrder () {
           this.descrerror = []

          if (!(cntrDate .getDay() % 6)) {
                          if  (await !ConfirmDialog('Confim', 'You have used a weekend day. Proceed ?')) {
                              this.descrerror.push('You have used a weekend day.')
                          }
    }

If I insert the code of the function inside the method all works fine

methods: {

 async ValidateOrder () {
           this.descrerror = []
         if (!(cntrDate .getDay() % 6)) {
               if (await new Promise(resolve => this.$q.dialog({
                            title: 'Confirm',
                             message: 'You have used a weekend day. Proceed ?'',
                             ok: {
                                   push: true,
                                   label: 'Yes',
                                   tabindex: 0
                                 },
                             cancel: {
                                 push: true,
                                 label: 'No',
                                 tabindex: 1
                               },
                             persistent: true,
                             focus: 'cancel'
                           }).onOk(() => resolve(true)).onCancel(() => resolve(false)))) {

                           } else {
                            this.descrerror.push('You have used a weekend day. ')
                           }
            }
    }

Does anyone have a suggestion to correctly display the message in the ConfirmDialog function?

Thanks