use compose API of VUE 3

src/views/Invoices.vue

@@ -2,4 +2,28 @@
   <div>
     <h1>Invoices</h1>
   </div>
-</template>
+</template>
+
+<script>
+
+import {onBeforeRouteLeave} from 'vue-router'
+
+export default {
+  setup(){
+    onBeforeRouteLeave((to, from) => {
+
+      const answer = window.confirm(
+        'Are you sure you want to leave? Invoices are super awesome!'
+      )
+
+      if (!answer) {
+        return false
+      }
+
+
+    })
+  }
+}
+
+
+</script>

src/views/Login.vue

@@ -11,12 +11,27 @@
   </div>
 </template>
 <script>
+
+import {ref} from 'vue'
+import {useRouter, useRoute} from 'vue-router'
+
 export default {
-  data(){
-    return {
-      username: '',
-      password: ''
-    }
+
+  setup(){
+
+      const username =  ref('')
+      const password = ref('')
+      const router = useRouter()
+      const route = useRoute()
+
+      const login = () => {
+        window.user = username.value
+        const redirectPath = route.query.redirect || '/protected'
+        router.push(redirectPath)
+      }
+
+      return {username, password, login}
+
   },
   methods: {
     login(){