Login Screen Vue Component

Login Screen Vue component represents Login Screen component.

Login Screen Components

There are following components included:

  • f7-login-screen - login screen element
  • f7-login-screen-title - login screen title element

Login Screen Properties

Prop Type Default Description
<f7-login-screen> properties
opened boolean false Allows to open/close Login Screen and set its initial state

Login Screen Methods

<f7-login-screen> methods
.open(animate) Open login screen
.close(animate) Close login screen

Login Screen Events

Event Description
<f7-login-screen> events
loginscreen:open Event will be triggered when Login Screen starts its opening animation
loginscreen:opened Event will be triggered after Login Screen completes its opening animation
loginscreen:close Event will be triggered when Login Screen starts its closing animation
loginscreen:closed Event will be triggered after Login Screen completes its closing animation

Open And Close Login Screen

In addition to Login Screen open()/close() methods, you can open and close it:

  • using Login Screen API
  • by passing true or false to its opened prop
  • by clicking on Link or Button with relevant login-screen-open property (to open it) and login-screen-close property to close it

Access To Login Screen Instance

You can access Login Screen initialized instance by accessing .f7LoginScreen component's property.


<!-- Login Screen -->
  <!-- Login Screen title -->
  <!-- Login Screen content goes here -->

Renders to:

<!-- Login Screen -->
<div class="login-screen">
  <!-- Login Screen title -->
  <div class="login-screen-title">Title</div>
  <!-- Login Screen content goes here -->

Full Screen Layout

According to Login Screen Layout here is the recommended Login Screen layout structure:

    <f7-page login-screen>
      <f7-login-screen-title>My App</f7-login-screen-title>
      <f7-list form>
          <f7-input type="text" placeholder="Your username"></f7-input>
          <f7-input type="password" placeholder="Your password"></f7-input>
        <f7-list-button login-screen-close>Sign In</f7-list-button>
        <f7-block-footer>Click Sign In to close Login Screen</f7-block-footer>


  • <f7-login-screen-title>My App</f7-login-screen-title> - additional component with Login Screen title
  • <f7-page login-screen> - additional boolean login-screen property on page component to add extra styling to page form elements