How to Store User Data in Vue.js Using Vuelidate and Laravel

We will explain the the process step by step to implement a user registration form using Vue.js with validation powered by Vuelidate, and a backend API built with Laravel. This guide with divide the code into smaller parts which will help you understand it better and give you a look at how different components come together to work to create a registration.

Requirements

To Store User Data in Vue.js with Vuelidate and Laravelmake sure you have the following installed:

1. Vue.js: We'll be using Vue 3.
2. Laravel: Our backend API will be built using Laravel.
3. Vuelidate: A validation library for Vue.js.

Registration Form in Vue.js

We need to create a basic registration form using Vue.js. The form will include fields for name, email, password, and a remember me checkbox. The code for a basic registration form is given below:

``` ```

Explanation

Registration Form Structure: The form includes fields for name, email, password, and a remember me checkbox. The form submission is handled by the storeUser method.

v-model: This directive is used to bind the input fields to the reactive data object form.

Step 2: Storing User Data with Axios

After the user has entered their data in the form we need to send the data to the backend. To sending the form data to the backend API using Axios. We’ll handle the form submission and manage the response accordingly.The code for a Registration form submissionis given below:

``` ```

Explanation

Axios Post Request: We use Axios to send a POST request to the  /api/users endpoint, passing in the form data.

Error Handling: We handle any errors that occur during the request, logging them to the console.

Form Reset: After a successful submission, the form is reset using the reset() method.

img

Step 3: Adding Validation with Vuelidate

Now that we have the form submission working we need to add validation. We’ll use Vuelidate to ensure that the form data meets specific requirements before it’s sent to the server. If you don’t already have Vuelidate you need to install Vuelidate by using the following code:

``` npm install @vuelidate/core @vuelidate/validators ```

Next, update your component to include validation. The code to update your component to include validation is given below:

``` ```

Explanation

• Vuelidate Setup: We import the necessary functions from Vuelidate and set up our validation rules.
• Validation Rules: The rules object defines the validation criteria for each form field (e.g., name is required, email must be a valid email address, and password must be at least 6 characters long or must include special characters etc.).
• Form Validation: Before the form is submitted, we validate it by calling v$.value.$validate(). If the validation fails, an alert is shown, and the form submission is aborted.
• Error Display: For each form field, we check if there are any validation errors and display the appropriate error message.

img

Setting Up the Laravel Controller

Now that the front end is set up we need to handle the data submission on the back end using Laravel. We'll create a store method in the UserController to validate the incoming request, hash the password, and store the user in the database. The code for the storemethod is given below:

```php /** * Store a newly created resource in storage. */ public function store(Request $request) { $validatedData = $request->validate([ 'name' => 'required|string|max:255', 'email' => 'required|string|email|max:255|unique:users', 'password' => 'required|string', ]); $validatedData['password'] = bcrypt($validatedData['password']); $user = User::create($validatedData); return new UserResource($user); } ```

Explanation of the Laravel Controller

1. Validation: The incoming request data is validated against the specified rules. Which will ensure that the name, email, and password fields are present, and that the email is unique among users.
2. Password Hashing: Before storing the user's data, the password is hashed using Laravel'sbcrypt function, ensuring it's stored securely.
3. User Creation: The validated data is used to create a new user record in the database.
4. Response: Finally, the newly created user is returned as a JSON response using a UserResource.