VueRouter + localStorage

by digitaldrifter

HTML

<script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple@3.2.0/dist/siimple.min.css">
<div id="app">

</div>

Vue

Vue.use(VueRouter)

Vue.component('phone-number', {
  template: `<div>
  <div class="siimple-form-field">
  <label class="siimple-form-field-label">Phone Number</label>
  <input class="siimple-input siimple-input" v-model="phoneNumber">
  </div>
  <div class="siimple-form-field">
  <router-link to="/otp" class="siimple-btn siimple-btn--primary">Enter OTP</router-link>
  </div>
  </div>`,
  data: () => ({ phoneNumber: null }),
  watch: {
    phoneNumber: {
      handler: function (value) {
        localStorage.setItem('phone-number', value)
      }
    }
  },
  mounted () {
    this.phoneNumber = localStorage.getItem('phone-number')
  }
})

Vue.component('one-time-password', {
  template: `<div>
  <div class="siimple-form-field">
  <label class="siimple-form-field-label">One Time Password</label>
  <input class="siimple-input siimple-input" v-model="otp">
  </div>
  <div class="siimple-form-field">
  <router-link to="/" class="siimple-btn siimple-btn--warning">Go Back</router-link>
  <router-link to="#" class="siimple-btn siimple-btn--success">Submit</router-link>
  </div>
  </div>`,
  data: () => ({ otp: null })
})

const router = new VueRouter({
  routes: [
    {
      component: {
        template: '<phone-number/>'
      },
      path: '/'
    },
    {
      component: {
        template: '<one-time-password/>'
      },
      path: '/otp'
    }
  ]
})

new Vue({
  el: '#app',
  router,
  template: `<div class="siimple-grid">
    <div class="siimple-grid-row">
    <div class="siimple-grid-col siimple-grid-col--3"></div>
    <div class="siimple-grid-col siimple-grid-col--6">
    <div class="siimple-form">
    <router-view></router-view>
    </div>
    </div>
    <div class="siimple-grid-col siimple-grid-col--3">   </div>
    </div>
		</div>`
})