Want to learn how to implement client-side form validation functionality in Vue js 3 Composition API for the sign-up and login pages?
Then, you’ve come to the right place!
Before going any further, let’s take a look at what you’re going to learn in this Vue JS 3 Composition API tutorial.
As you can see from the final output below, all of the input fields in the sign-up form have empty check validation as well as additional validation such as email, min length, etc on keyup and blur events.
When all the input fields are filled with no errors, the…
Whenever we have a list of items such as products, it’s obvious to have a search items functionality on the client-side for a better user experience.
In Vue 3 Composition API, we can easily create a search bar using computed properties.
In fact, this is one of the perfect cases for utilizing computed properties.
Let’s say I have a ProductList.vue page-based component that will show a list of products that I want to add search functionality to it.
ProductList.vue
<template>
</template><script>
export default {
setup() {},
};
</script>
Get Products Data From Firebase
Let’s make an HTTP request to a server to get a…
In this article, I’ll be showing you how to easily create responsive multi-column mobile-friendly layouts using CSS Flexbox.
If you have a Shopify store, this article will help you design your product description page so that you don’t have to pay a monthly subscription fee for an app that does this.
What are we building?
As a Vue.js developer, we want to keep our code clean and tidy by creating the optimal amount of reusable code.
With Composition API, we can absolutely do that by creating reusable JS modules aka hook functions and child components.
So what’s the difference between them?
When do we use one or the other?
Let’s find out!
JavaScript module aka hook function is a great way to separate business logic from the Vue component.
It’s completely reusable and UI-independent.
If you’re coming from MVC pattern, this would be the M (Model) part of it.
Vue components that are not page-based…
Directions Service
The Directions Service is a client-side JavaScript library that lets us get directions data between two locations based on travel mode such as driving, walking, etc.
The Directions Service talks to Google Maps API behind the scene that takes direction requests such as origin, destination, travel mode and returns the efficient directions path data including multi-part directions.
Enable Directions API library
First, make sure that the Directions API library is enabled on the Google Cloud Console.
Include Maps JavaScript Library
Also, make sure to include the google maps client-side library in the project.
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]">Make A Request To Directions Service
Create an instance of the DirectionsService Object.
const directionsService = new google.maps.DirectionsService();Call…
When you’re using Firebase in the Vue JS app, you’ll probably get a warning similar to the screenshot below.
This will happen when you import Firebase anywhere in the project using the following code :
import firebase from "firebase";When you use the above code, it actually imports all of the firebase products such as Authentication, Storage, etc, available to use right off the bat, even the ones that you do not intend to use.
This can be inefficient as it will add extra Javascript code to the project that is not needed.
Let see how to get rid of…
In this article, I’m going to cover how to validate a simple sign-up form on the client-side in vue.js using Options API.
As you can see from the final output below, when I press the sign-up button with all the input fields empty, error messages appear above the sign-up form.
When I enter the wrong email address, I get a different validation error, this time saying invalid email.
Finally, I am going to restrict the length of the password to be at least 8 characters.
In this process, I’ll be showing you how to:
- Create and bind user object…
Designing a signup form from scratch in Vue.js can sometimes be hard, but with the help of the Semantic UI CSS framework, we can create forms not only fast but also look professional.
As you can see the sign-up form is centered on the browser viewport and it has a header and three input fields, as well as a button.
I designed this with the combination of flexbox and the Semantic UI CSS framework.
1. For Development Purposes Only
Sometimes you see websites that have google maps embedded but they have a “For Development Purposes Only” watermark.
<script src="https://maps.googleapis.com/maps/api/js"></script>Two different ways on how to prevent default form submission behaviour using Vue.js
Let’s say you have a sign up form that you do not want to submit to the server directly.
As you know, the default behaviour of the form element is to send the form input data via GET request when the submit button is pressed.
<form class="ui large form">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" placeholder="Username or Email"/>
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" placeholder="Password"/>
</div>
</div>
<button class="ui fluid pink button big" >SIGN IN</button>
</form>form {
width:400px;
margin:20px auto;
}
To prevent that, what…
