That’s it. Thanks. I just removed the orientation so it will use the default phone settings and listen to the orientation lock.

I have a quasar app that I build in PWA mode. When I visit the app through a mobile browser (chrome) and rotate my screen the app switches to landscape mode (probably because this is being handeld by the browser. However when I do the same with the PWA added to my homescreen it doesn’t flip anymore. Anybody know where to change this behaviour?

Found it. I was looking at old documentation. I should use prompts now instead of form.

It looks to me like the form is the only thing that won’t load. Do I need to import it in my framework? if so, where and how?

First off, how to i format my code in this forum? It will make this post so much better.

Anyway. I am trying to create a dialog, however it opens up half empty. Here is a screenshot:

And here is the code (its from this example: http://v0-13.quasar-framework.org/components/dialog.html):

methods: {
change_user() {
Dialog.create({
title: ‘Prompt’,
form: {
name: {
type: ‘textbox’,
label: ‘Textbox’,
model: ‘’,
},
pass: {
type: ‘password’,
label: ‘Password’,
model: ‘’,
},
age: {
type: ‘numeric’,
label: ‘Numeric’,
model: 10,
min: 1,
max: 100,
},
tags: {
type: ‘chips’,
label: ‘Chips’,
model: [‘Joe’, ‘John’],
},
comments: {
type: ‘textarea’,
label: ‘Textarea’,
model: ‘’,
},
},
buttons: [
‘Cancel’,
{
label: ‘Ok’,
handler(data) {
Notify.create(Returned ${JSON.stringify(data)});
// data.name is ‘Quasar’
// data.pass is ‘rulz!’
// data.age is 1
// data.tags is [‘Joe’, ‘John’],
// data.comments is ‘Some comments…’
},
},
],
});
},

And from my quasar.conf.js:
framework: {
components: [
‘QLayout’,
‘QLayoutHeader’,
‘QLayoutDrawer’,
‘QPageContainer’,
‘QPage’,
‘QToolbar’,
‘QToolbarTitle’,
‘QBtn’,
‘QIcon’,
‘QList’,
‘QListHeader’,
‘QItem’,
‘QItemMain’,
‘QItemSide’,
‘QInput’,
‘QCard’,
‘QCardTitle’,
‘QCardMain’,
‘QCardMedia’,
‘QCardSeparator’,
‘QCardActions’
],
directives: [
‘Ripple’
],
// Quasar plugins
plugins: [
‘Notify’,
‘Dialog’
]

What am I missing?

@metalsadman Sorry for the late reply. You suggested solution worked

@metalsadman Taking your sample I now get:
Uncaught TypeError: routes__WEBPACK_IMPORTED_MODULE_3_.default.beforeEach is not a function.

Is beforeEach a default Vue feature?

@metalsadman thanks for you input!

Your way also results in an .beforeeach is not a function:

Uncaught TypeError: routes__WEBPACK_IMPORTED_MODULE_2_.default.beforeEach is not a function

My full code in index.js (how do I format code here?)

import Vue from ‘vue’
import VueRouter from ‘vue-router’
import routes from ‘./routes’
import { AUTH } from ‘…/plugins/firebase’

Vue.use(VueRouter)
const Router = new VueRouter({
mode: process.env.VUE_ROUTER_MODE,
base: process.env.VUE_ROUTER_BASE,
scrollBehavior: () => ({ y: 0 }),
routes
})

routes.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!auth.loggedIn()) {
next({
path: ‘/login’,
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // make sure to always call next()!
}
})

export default Router

@eleina Thanks for answering!

I am getting ‘routes.beforeEach is not a function’
From what I can find I need to add it as a plugin, but nowhere can I find the content of that plugin…

Could you help me with that? the rest seems solid so if I have that function working it should all be fine.

(I also read something about beforeEnter in vue routing, is that also a viable solution?)

Edit: I know I can just add that beforeCreate to each page.vue to fix this but I am assuming there has to be a way where I don’t have to set this check on every page.