Creating a Full-Stack Application Using Laravel and Vue.js with Authentication

In today’s tech landscape, building robust and dynamic web applications requires effective frameworks that streamline development processes. Laravel, a PHP framework, and Vue.js, a progressive JavaScript framework, are becoming increasingly popular choices for creating full-stack applications. This article will guide you through the process of creating a full-stack application using Laravel and Vue.js, focusing on implementing authentication—a critical feature for securing user data.

What is a Full-Stack Application?

A full-stack application consists of both the front-end (client-side) and back-end (server-side) of a web application. The front-end is everything that users interact with, while the back-end deals with the server, database, and application logic. Using Laravel for the back end and Vue.js for the front end allows developers to create a seamless user experience while maintaining a powerful server-side framework.

Why Choose Laravel and Vue.js?

• Laravel: Known for its elegant syntax and powerful features like routing, middleware, and Eloquent ORM, Laravel simplifies tasks common in web development.
• Vue.js: An approachable framework for building interactive user interfaces, Vue.js provides reactivity and component-based architecture, making it easy to manage complex applications.

Setting Up Your Development Environment

Before you begin building your application, ensure you have the following installed on your machine:

• PHP: Version 7.3 or higher
• Composer: Dependency manager for PHP
• Node.js: For running Vue.js
• npm: Package manager for JavaScript
• Laravel: Install via Composer
• Vue.js: Install through npm

Step 1: Creating a Laravel Project

To create a new Laravel project, navigate to your terminal and run:

composer create-project --prefer-dist laravel/laravel laravel-vue-auth

Once the installation is complete, navigate into your project directory:

cd laravel-vue-auth

Step 2: Setting Up Authentication

Laravel provides an out-of-the-box authentication system. To scaffold the authentication features, use Laravel Breeze, which is lightweight and easy to use. First, install Breeze using Composer:

composer require laravel/breeze --dev

Next, run the Breeze installation command:

php artisan breeze:install

After that, run the migrations to create the necessary tables for authentication:

php artisan migrate

Finally, install the frontend dependencies:

npm install && npm run dev

Step 3: Setting Up Vue.js

Within your Laravel project, you can create a Vue component for handling user authentication. Create a new directory for your Vue components:

mkdir resources/js/components

Create a new Vue component called Login.vue in the components directory:

<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="login">
      <input v-model="email" type="email" placeholder="Email" required />
      <input v-model="password" type="password" placeholder="Password" required />
      <button type="submit">Login</button>
    </form>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
      error: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('/login', {
          email: this.email,
          password: this.password
        });
        if (response.data.success) {
          // Redirect or do something after successful login
        }
      } catch (err) {
        this.error = err.response.data.message || 'Login failed';
      }
    }
  }
};
</script>

Step 4: Integrating Vue.js into Laravel

Open the resources/js/app.js file and import your new component:

import { createApp } from 'vue';
import Login from './components/Login.vue';

createApp(Login).mount('#app');

Make sure to include the #app div in your Blade template (e.g., resources/views/welcome.blade.php):

<div id="app"></div>

Step 5: Configuring API Routes in Laravel

To handle authentication requests from Vue.js, define API routes in routes/api.php. For example:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\AuthenticatedSessionController;

Route::post('/login', [AuthenticatedSessionController::class, 'store']);

Step 6: Testing Your Application

After setting up the authentication system, run your Laravel server:

php artisan serve

Now, navigate to http://localhost:8000, and you should see your login form. Test the login functionality by entering valid credentials.

Troubleshooting Common Issues

• CORS Issues: If you encounter Cross-Origin Resource Sharing (CORS) issues, ensure that your API routes are configured correctly and that the necessary headers are set.
• Missing Vue Component: If your Vue component doesn't render, check the console for errors and ensure you have run npm run dev to compile assets.
• Authentication Errors: Verify that your database and .env settings are correct, especially the DB_CONNECTION and DB_DATABASE values.

Conclusion

Building a full-stack application with Laravel and Vue.js, including authentication, is a powerful approach that leverages the strengths of both frameworks. By following this guide, you can create a secure and interactive application that provides a seamless user experience. Continue to explore Laravel and Vue.js features to enhance your application further, and don’t hesitate to troubleshoot common issues as you develop. Happy coding!