materio-d9/web/themes/custom/materiotheme/vuejs/components/User/Login.vue

<template lang="html">
  <div id="block-userlogin" class="">
    <h2>{{ title }}</h2>
    <section>
      <input
        id="edit-name"
        class="form-email"
        type="text"
        v-bind:placeholder="form.ph_email" name="name"
        v-model="mail"
        @keyup.enter="login"
      />
      <input
        id="edit-pass"
        class="form-text"
        type="password"
        v-bind:placeholder="form.ph_pass" name="pass"
        v-model="password"
        @keyup.enter="login"
      />
      <button
        id="edit-submit"
        class="button"
        @click.stop="login"
      >
        {{ form.btn_value }}
      </button>
      <ul>
        <li><a
          v-bind:href="form.register.href"
        >
          {{ form.register.title }}
        </a></li>
        <li><a
          v-bind:href="form.reset.href"
        >
          {{ form.reset.title }}
        </a></li>
      </ul>
    </section>
  </div>
</template>

<script>
// https://github.com/alvar0hurtad0/drupal-vuejs-todo
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      mail: '',
      password: ''
    }
  },
  props: ['title', 'form'],
  computed: {
    ...mapState(['User'])
  },
  methods: {
    ...mapActions({
      userLogin: 'User/userLogin'
    }),
    login () {
      this.userLogin({
        mail: this.mail,
        pass: this.password
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  section{
    max-width:300px;
  }
  input{
    display:block;
    max-width:100%;
    margin:0.5em 0 0 0;
  }
  button{
    margin:0.5em 0 0 0;
  }
  ul{
    margin:0; padding:0.5em 0 0 0;
  }
  li{
    list-style:none;
    margin:0.5em 0 0 0; padding:0;
    font-size:0.882em;
  }
  a{
  }
</style>