Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Form Validation
We can control form validation within the component object.
To do this, we assign a ref to our q-form and then call the methods that are exposed:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-form
@submit="onSubmit"
@reset="onReset"
class="q-gutter-md"
ref="form"
>
<q-input
filled
v-model="name"
label="Your name *"
hint="Name"
lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"
>
</q-input>
<q-input
filled
type="number"
v-model="age"
label="Your age *"
lazy-rules
:rules="[
val => val !== null && val !== '' || 'Please type your age',
val => val > 0 && val < 130 || 'Please type a real age'
]"
>
</q-input>
<div>
<q-btn label="Submit" type="submit" color="primary"></q-btn>
<q-btn
label="Reset"
type="reset"
color="primary"
flat
class="q-ml-sm"
></q-btn>
</div>
</q-form>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
name: "",
age: ""
},
methods: {
async onSubmit() {
const sucess = await this.$refs.form.validate();
if (!success) {
return;
}
this.$q.notify({
color: "green-4",
textColor: "white",
icon: "cloud_done",
message: "Submitted"
});
},
onReset() {
this.name = null;
this.age = null;
this.$refs.form.resetValidation();
}
}
});
</script>
</body>
</html>
We assign the form ref to the q-form component.
In the onSubmit method, we use the ref by calling the validate method to validate the form.
And then we call resetValidation to reset validation in the onReset method.
Form Field
We can use the q-field component to create our own form field.
For example, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-field label="Standard" stack-label>
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">
Field content
</div>
</template>
</q-field>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We add the q-field component and populate its control slot to add the field with the placeholder being the content of the control slot.
Form Field Color
We can set the color of form fields.
For example, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-field
color="lime-11"
bg-color="green"
filled
label="Label"
stack-label
>
<template v-slot:prepend>
<q-icon name="event"></q-icon>
</template>
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">
{{text}}
</div>
</template>
</q-field>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
text: "abc"
}
});
</script>
</body>
</html>
to add the bg-color prop to change the background color of the form field.
Conclusion
We can add form validation and custom form fields into our Vue app with Quasar.
