App.vue

<template>
  <main class="container">
    <form @submit.prevent="onSubmit" class="form">
      <div class="title-wrapper">
        <h1 class="title">Log In</h1>
      </div>
      <b-notification
        v-if="(!this.email || !this.password) && this.isDirty"
        type="is-danger"
        aria-close-label="Close notification"
        role="alert">
        Please enter email and password!
      </b-notification>

      <b-field label="Email">
        <b-input type="email" v-model="email" />
      </b-field>

      <b-field label="Password">
        <b-input value="123" type="password" v-model="password" />
      </b-field>

      <div class="field is-grouped">
        <div class="control">
          <button class="button is-link" @click.prevent="onSubmit">Login</button>
        </div>
      </div>
    </form>
  </main>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
      isDirty: false,
    };
  },

  methods: {
    onSubmit() {
      this.isDirty = true;
    },
  },
};
</script>

<style>
body {
  min-height: 100vh;
}
</style>

<style scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.title-wrapper {
  width: 100%;
  text-align: center;
  dispay: block;
  margin-bottom: 20px;
}

.form {
  display: block;
  width: 400px;
}

@media only screen and (max-width: 600px) {
  .form {
    width: 100%;
    padding: 20px;
  }
}
</style>