Create a Vuejs login page use Vuetify template and validate with vee-validate
Create a Vuejs login page use Vuetify template and validate with vee-validate:
Some packages you must have before start:
Create vuetify plugin:
Add vuetify plugin:
Create login page with a pies of code template bellow:
Add this Script code into your Login.vue file, in this form, we just verify password and email fields:
The last thing to do, add custom styles to your app
Enjoin your result:
Some packages you must have before start:
yarn add vee-validate, vuetify yarn add vuetify-loader, vuetify-loader, sass, sass-loader -D
Create vuetify plugin:
//plugins/vuetify.js import Vue from 'vue' import Vuetify from 'vuetify/lib' Vue.use(Vuetify) export default new Vuetify({})
Add vuetify plugin:
//main.js import Vue from 'vue' import vuetify from 'plugins/vuetify' import App from './App.vue' import "./assets/styles.scss"; Vue.config.productionTip = false new Vue({ render: h => h(App), vuetify }).$mount('#app')
Create login page with a pies of code template bellow:
Add this Script code into your Login.vue file, in this form, we just verify password and email fields:
import { required, email } from 'vee-validate/dist/rules' import { extend, ValidationProvider, setInteractionMode, ValidationObserver } from 'vee-validate' setInteractionMode('eager') extend('required', { ...required, message: '{_field_} can not be empty' }) extend('email', { ...email, message: 'Email must be valid' }) export default { components: { ValidationProvider, ValidationObserver }, data: () => ({ email: '', password: null, showPass: false }), computed: { params() { return { email: this.email, password: this.password } } }, methods: { async submit() { const valid = await this.$refs.observer.validate() if (valid) { this.login(this.params) // action to login } }, clear() { // you can use this method to clear login form this.email = '' this.password = null this.$refs.observer.reset() } } }
The last thing to do, add custom styles to your app
/* ./assets/styles.scss */ .section-container { padding: 20px; margin: 20px; background: #fff; width: 100%; box-shadow: 0 0 1px 1px rgba($color: #000000, $alpha: 0.1); box-sizing: border-box; .signin { padding: 0; max-width: 1000px; margin: 0 auto; min-height: 600px; box-shadow: 0 0 1px 1px rgba($color: #000000, $alpha: 0.1); .left { padding: 30px; justify-content: center; align-items: center; box-sizing: border-box; display: flex; color: #30ac7c; background-color: #f9f9f9; } .right { padding: 30px; box-sizing: border-box; background: #30ac7c; color: #fff; h2 { text-align: center; margin: 30px 0; } .signin-btn { width: 100%; color: #30ac7c; } } } }
Enjoin your result:

To know more about Vuetify form and vee-validate, please take a look the official documents: Vuetify and vee-validate
Latest
© 2019 4codev
Created with love by Sil.