<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="page no-toolbar no-navbar no-swipeback"> <div class="page-content login-screen-content"> <div class="login-screen-title">Framework7</div> <form> <div class="list"> <ul> <li class="item-content item-input item-input-with-value"> <div class="item-inner"> <div class="item-title item-label">Username</div> <div class="item-input-wrap"> <input type="text" placeholder="Your username" id="demo-username-2" class="input-with-value"> <span class="input-clear-button"></span> </div> </div> </li> <li class="item-content item-input"> <div class="item-inner"> <div class="item-title item-label">Password</div> <div class="item-input-wrap"> <input type="password" placeholder="Your password" id="demo-password-2" class=""> </div> </div> </li> </ul> </div> <div class="list"> <ul> <li><a href="#" class="item-link list-button" @click="signIn">Sign In</a></li> </ul> <div class="block-footer">Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </div> </form> </div> </div>

<script> return { methods: { signIn: function () { var $ = this.$; var app = this.$app; var router = this.$router; var username = $('input#demo-username-2').val(); var password = $('input#demo-password-2').val(); app.dialog.alert('Username: ' + username + '<br>Password: ' + password, function () { app.loginScreen.close(); router.back(); }) } } } </script>