#CleanCode PUG or no PUG - that's the question

[Dr4gon]

@fedect1 In the frontend there's both. Do you generally want use pug or plain html?

SignupView.vue

<template lang="pug">
.wrapper
  form(@submit.prevent="register")
    h1 Sign up
    .input-box
      input#email(v-model="email" type="text" placeholder="Email" required)
      i.bx.bxs-envelope
    .input-box
      input#password1(v-model="password1" type="password" placeholder="Password" required)
      i.bx.bxs-lock-alt
    .input-box
      input#password2(v-model="password2" type="password" placeholder="Repeat your password" :class="{ 'password-mismatch': !passwordsMatch }" required)
      i.bx.bxs-lock-alt
    button.btn(type='submit' :disabled="password1 !== password2 || !password1 || !password2") Create account

</template>

ProfileView.vue

<template>
  <div v-if="user" class="profile-container">
    <h2>Profile</h2>
    <div class="profile-info">
      <div class="profile-info-username">
        <p>Username</p>
        <p>{{ user.name }}</p>
      </div>
      <div class="profile-info-description">
        <p>Description</p>
        <p>{{ user.description }}</p>
      </div>
      <div class="profile-info-avatar">
        <p>Avatar</p>
        <p>{{ this.user.avatar }}</p>
        <img alt="avatar" />
      </div>
    </div>
  </div>

  <div class="profile-edit-container">
    <div class="username">
      <p>Username</p>
      <input
        v-model="newUsername"
        type="text"
        name="username"
        id="username"
        placeholder="Username"
      />
      <button @click="handleNameChange">Save</button>
    </div>
    <div class="description">
      <p>Description</p>
      <input
        v-model="newDescription"
        type="text"
        name="description"
        id="description"
        placeholder="Description"
      />
      <button @click="handleDescriptionChange">Save</button>
    </div>
    <div class="avatar">
      <p>Avatar</p>
      <input type="file" name="avatar" id="avatar" />
      <button>Save</button>
    </div>
  </div>
</template>