[V2] Framework7 Vue Login Screen within Vue component using Routable Modals

I want to check if user has logged in before loading the page, so I use async route:

async (routeTo, routeFrom, resolve, reject) {
  if (userIsLoggedIn) { // userIsLoggedIn
    resolve({
      component: SomePage
    })
  } else {
    resolve({
      loginScreen: {
        component: LoginScreen
      }
    })
  }
}

And this is what I have in LoginScreen.vue:

<f7-login-screen id="login-screen">
  <f7-view>
    <f7-page login-screen>
      <f7-login-screen-title>Login</f7-login-screen-title>
      <f7-list form>
        <f7-list-item>
          <f7-label>Username</f7-label>
          <f7-input name="username" placeholder="Username" type="text"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>Password</f7-label>
          <f7-input name="password" type="password" placeholder="Password"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-list>
        <f7-list-button title="Sign In" login-screen-close></f7-list-button>
        <f7-block-footer>
          <p>Click Sign In to close Login Screen</p>
        </f7-block-footer>
      </f7-list>
    </f7-page>
  </f7-view>
</f7-login-screen>

If userIsLoggedIn === false, it will show error like this:

framework7.esm.bundle.js?c501:2047 Uncaught TypeError: options[cycleKey].bind is not a function
at eval (framework7.esm.bundle.js?c501:2047)
at Array.forEach (<anonymous>)
at new Framework7Component (framework7.esm.bundle.js?c501:2047)
at Object.create (framework7.esm.bundle.js?c501:2362)
at compile (framework7.esm.bundle.js?c501:5127)
at Router$1.componentLoader (framework7.esm.bundle.js?c501:5197)
at Router$1.modalComponentLoader (framework7.esm.bundle.js?c501:5197)
at loadModal (framework7.esm.bundle.js?c501:3788)
at eval (framework7.esm.bundle.js?c501:3796)
at Array.forEach (<anonymous>)
(anonymous) @ framework7.esm.bundle.js?c501:2047

Framework7Component @ framework7.esm.bundle.js?c501:2047
create @ framework7.esm.bundle.js?c501:2362
compile @ framework7.esm.bundle.js?c501:5127
componentLoader @ framework7.esm.bundle.js?c501:5197
modalComponentLoader @ framework7.esm.bundle.js?c501:5197
loadModal @ framework7.esm.bundle.js?c501:3788
(anonymous) @ framework7.esm.bundle.js?c501:3796
modalLoad @ framework7.esm.bundle.js?c501:3796
(anonymous) @ framework7.esm.bundle.js?c501:3465
asyncResolve @ framework7.esm.bundle.js?c501:3465
async @ routes.js?3ca5:31
navigate @ framework7.esm.bundle.js?c501:3465
handleClicks @ framework7.esm.bundle.js?c501:5790
(anonymous) @ framework7.esm.bundle.js?c501:607
(anonymous) @ framework7.esm.bundle.js?c501:607
emit @ framework7.esm.bundle.js?c501:607
emitAppTouchEvent @ framework7.esm.bundle.js?c501:1866
appClick @ framework7.esm.bundle.js?c501:1866
sendClick @ framework7.esm.bundle.js?c501:1658
handleTouchEnd @ framework7.esm.bundle.js?c501:1850
(anonymous) @ framework7.esm.bundle.js?c501:607
(anonymous) @ framework7.esm.bundle.js?c501:607
emit @ framework7.esm.bundle.js?c501:607
emitAppTouchEvent @ framework7.esm.bundle.js?c501:1866
appTouchEndActive @ framework7.esm.bundle.js?c501:1866

It works for me and shows no error if I replace

component: LoginScreen

with

content: `
  <div class="login-screen">
    <div class="view">
      <div class="page">
        ...
      </div>
    </div>
  </div>
  `

But I want to use vue component.
How should I fix this?

My code was modified from the example here: https://framework7.io/docs/routes.html#routable-modals

I don’t know if I’m doing it right?
Is there any example using routable modals with Vue component (not componentUrl)

1 Like

At the moment F7-Vue doesn’t support routable modals, will be added in next updates. As a workaround put login screen component under app root and enable/show it using required condition. And in async route use reject() in this case and show login screen

Thanks for replying. Looking forward to see the update :slight_smile:

Do we have this update now ?