Vuetify Example Pen

index.html

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container fluid>
        <v-layout row wrap>
  
          <v-flex xs12 sm6>
            <v-text-field
              v-model="password"
              :append-icon="show1 ? 'visibility_off' : 'visibility'"
              :rules="[rules.required, rules.min]"
              :type="show1 ? 'text' : 'password'"
              name="input-10-1"
              label="Normal with hint text"
              hint="At least 8 characters"
              counter
              @click:append="show1 = !show1"
            ></v-text-field>
          </v-flex>
  
          <v-flex xs12 sm6>
            <v-text-field
              :append-icon="show2 ? 'visibility_off' : 'visibility'"
              :rules="[rules.required, rules.min]"
              :type="show2 ? 'text' : 'password'"
              name="input-10-2"
              label="Visible"
              hint="At least 8 characters"
              value="wqfasds"
              class="input-group--focused"
              @click:append="show2 = !show2"
            ></v-text-field>
          </v-flex>
  
          <v-flex xs12 sm6>
            <v-text-field
              :append-icon="show3 ? 'visibility_off' : 'visibility'"
              :rules="[rules.required, rules.min]"
              :type="show3 ? 'text' : 'password'"
              name="input-10-2"
              label="Not visible"
              hint="At least 8 characters"
              value="wqfasds"
              class="input-group--focused"
              @click:append="show3 = !show3"
            ></v-text-field>
          </v-flex>
  
          <v-flex xs12 sm6>
            <v-text-field
              :append-icon="show4 ? 'visibility_off' : 'visibility'"
              :rules="[rules.required, rules.emailMatch]"
              :type="show4 ? 'text' : 'password'"
              name="input-10-2"
              label="Error"
              hint="At least 8 characters"
              value="Pa"
              error
              @click:append="show4 = !show4"
            ></v-text-field>
          </v-flex>
  
        </v-layout>
      </v-container>
    </v-form>
  </v-app>
</div>

script.babel

new Vue({
  el: '#app',
  data () {
    return {
      show1: false,
      show2: true,
      show3: false,
      show4: false,
      password: 'Password',
      rules: {
        required: value => !!value || 'Required.',
        min: v => v.length >= 8 || 'Min 8 characters',
        emailMatch: () => ('The email and password you entered don\'t match')
      }
    }
  }
})

scripts

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.4/dist/vuetify.min.js"></script>

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.4/dist/vuetify.min.css" rel="stylesheet" />

vuetify-example-pen.markdown

Vuetify Example Pen

A Pen by Pappu Kumar Pashi on CodePen.

License.