flaschengeist-frontend/src/pages/Login.vue

<template>
  <q-page padding class="fit row  justify-center items-center content-center">
    <q-card
      class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center"
    >
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title>
          Login
        </q-toolbar-title>
      </q-toolbar>

      <q-card-section>
        <q-form ref="LoginForm" @submit="doLogin" class="q-gutter-md">
          <q-input
            filled
            v-model="username"
            label="Benutzername oder E-Mail"
            :rules="rules"
          />
          <q-input
            filled
            v-model="password"
            type="password"
            label="Password"
            :rules="rules"
          />
          <div class="row justify-end">
            <q-btn label="Login" type="submit" color="primary" />
          </div>
        </q-form>
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';

export default defineComponent({
  // name: 'PageName'
  setup(_, ctx) {
    const username = ref('');
    const password = ref('');
    const rules = [
      (val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!'
    ];

    function doLogin() {
      console.log(username.value, password.value);
      void ctx.root.$router.push({ name: 'main' });
    }

    return { username, password, doLogin, rules };
  }
});
</script>