How To Create A Laravel 10 and Vue Js 3 E-commerce App

X<span class="token operator">-</span>Requested<span class="token operator">-</span>With<span class="token punctuation">:</span> XMLHttpRequest<span class="token punctuation">.</span>

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

php artisan migrate

namespace App\Models;

use Laravel\Sanctum\HasApiTokens;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    use HasApiTokens, Notifiable;
}

'paths' => ['api/*', 'sanctum/csrf-cookie'],

'allowed_origins' => ['http://localhost:8080'], // or your frontend’s URL

'supports_credentials' => true,

php artisan make:controller AuthController

// Include necessary namespaces
namespace App\Http\Controllers;

use Illuminate\Http\Request; // For handling HTTP requests
use Illuminate\Support\Facades\Auth; // For handling authentication
use App\Models\User; // User model

// Define AuthController class which extends Controller
class AuthController extends Controller
{
// Function to handle user registration
public function register(Request $request)
{
// Validate incoming request fields
    $request->validate([
    'name' => 'required|string|max:255', // Name must be a string, not exceed 255 characters and it is required
    'email' => 'required|string|email|max:255|unique:users', // Email must be a string, a valid email, not exceed 255 characters, it is required and it must be unique in the users table
    'password' => 'required|string|min:6', // Password must be a string, at least 6 characters and it is required
]);

// Create new User
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => bcrypt($request->password), // Hash the password
]);

// Return user data as JSON with a 201 (created) HTTP status code
return response()->json(['user' => $user], 201);
}

// Function to handle user login
public function login(Request $request)
{
// Validate incoming request fields
$request->validate([
'email' => 'required|string|email', // Email must be a string, a valid email and it is required
'password' => 'required|string', // Password must be a string and it is required
]);

// Check if the provided credentials are valid
if (!Auth::attempt($request->only('email', 'password'))) {
// If not, return error message with a 401 (Unauthorized) HTTP status code
return response()->json(['message' => 'Invalid login details'], 401);
}

// If credentials are valid, get the authenticated user
$user = $request->user();
// Create a new token for this user
$token = $user->createToken('authToken')->plainTextToken;

// Return user data and token as JSON
return response()->json(['user' => $user, 'token' => $token]);
}

// Function to handle user logout
public function logout(Request $request)
{
  // Delete all tokens for the authenticated user
  $request->user()->tokens()->delete();

   // Return success message as JSON
   return response()->json(['message' => 'Logged out']);
}
}

use App\Http\Controllers\AuthController;

Route::post('/register', [AuthController::class, 'register']);
Route::post('/login', [AuthController::class, 'login']);
Route::middleware('auth:sanctum')->post('/logout', [AuthController::class, 'logout']);

name: Jared Jason

email: Jared@admin.com

password: password

email: Jared@admin.com

password: password

import axios from 'axios';
const instance = axios.create({
baseURL: 'http://localhost:8000/api'
});


export default instance;

module.exports = {
    lintOnSave: false,
};

<template>
<!-- Form for adding a product -->
<!-- @submit.prevent="submitForm" prevents the default form submission and calls the 'submitForm' method instead -->
<form @submit.prevent="submitForm" class="add-product-form">
<!-- Input for the product name -->
<!-- v-model="name" binds the input to the 'name' data property -->
<input class="input-field" v-model="name" placeholder="Product Name" />
<!-- Error message for the product name -->
<!-- Displayed if 'errors.name' is truthy -->
<p v-if="errors.name" class="error">{{ errors.name }}</p>


<!-- Input for the product description -->
<!-- v-model="description" binds the input to the 'description' data property -->
<input class="input-field" v-model="description" placeholder="Product Description" />
<!-- Error message for the product description -->
<!-- Displayed if 'errors.description' is truthy -->
<p v-if="errors.description" class="error">{{ errors.description }}</p>


<!-- Input for the product price -->
<!-- v-model="price" binds the input to the 'price' data property -->
<input class="input-field" v-model="price" placeholder="Product Price" />
<!-- Error message for the product price -->
<!-- Displayed if 'errors.price' is truthy -->
<p v-if="errors.price" class="error">{{ errors.price }}</p>


<!-- Button for submitting the form -->
<button type="submit" class="submit-button">Add Product</button>
</form>
</template>


<script>
// Importing the axios instance
import axios from '@/axios';


export default {
// Component data
data() {
return {
// Product details
name: '',
description: '',
price: '',
// Validation errors
errors: {}
};
},
methods: {
// Validate the input fields
validateInput() {
// Errors object
const errors = {};
// Validate the product name
if (!this.name) errors.name = 'Name is required';
// Validate the product description
if (!this.description) errors.description = 'Description is required';
// Validate the product price
if (!this.price || isNaN(this.price)) errors.price = 'Price is required and must be a number';
return errors;
},
// Handle form submission
async submitForm() {
// Validate the input fields
const errors = this.validateInput();
// If there are validation errors, update the 'errors' data property and stop execution
if (Object.keys(errors).length > 0) {
this.errors = errors;
return;
}


try {
// Send a POST request to the API to add the product
await axios.post('/products', {
name: this.name,
description: this.description,
price: this.price
});
// If the request is successful, redirect to the product list
this.$router.push('/');
} catch (error) {
// If an error occurs, log it to the console
console.error("An error occurred while adding the product:", error);
}
}
}
};
</script>






<style scoped>
.error {
color: red;
}
.add-product-form {
max-width: 400px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}


.input-field {
display: block;
width: 100%;
margin: 10px 0;
padding: 10px;
font-size: 1em;
}


.submit-button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}


.submit-button:hover {
background-color: #45a049;
}
</style>

<template>
<!-- Product list container -->
<div class="product-list">
<ul>
<!-- Product list item -->
<!-- Use Vue's 'v-for' directive to loop through the products array -->
<li class="product-item" v-for="product in products" :key="product.id">
<!-- Display the product name -->
<span class="product-name">{{ product.name }}</span>

<!-- Container for action links -->
<div class="action-links">
<!-- Link to edit the product -->
<!-- Use Vue Router's 'router-link' component to create a navigation link -->
<!-- Use Vue's 'v-bind' directive (shorthand ':') to bind the 'to' prop with route data -->
<router-link class="edit-link" :to="{ name: 'EditProduct', params: { id: product.id } }">Edit</router-link>

<!-- Link to view product details -->
<router-link class="details-link" :to="{ name: 'ProductDetails', params: { id: product.id } }">View Details</router-link>

<!-- Button to delete the product -->
<!-- Use Vue's 'v-on' directive (shorthand '@') to bind the click event with the 'deleteProduct' method -->
<button class="delete-button" @click="deleteProduct(product.id)">Delete</button>
</div>
</li>
</ul>
</div>
</template>

<script>
import axios from '@/axios'; // Import the axios instance

export default {
// Component data
data() {
return {
// Initialize products as an empty array
products: []
};
},
methods: {
// Method to delete a product
async deleteProduct(id) {
try {
// Make a DELETE request to the API
await axios.delete(`/products/${id}`);

// If the request is successful, filter the deleted product out of the products array
this.products = this.products.filter(product => product.id !== id);
} catch (error) {
// If an error occurs, log it to the console
console.error("An error occurred while deleting the product:", error);
}
}
},
// Lifecycle hook that is called after the instance has been created
async created() {
try {
// When the component is created, fetch the products from the API
const response = await axios.get('http://localhost:8000/api/products');
// Update the products array with the data from the API
this.products = response.data;
} catch (error) {
// If an error occurs, log it to the console
console.error("An error occurred while fetching the products:", error);
}
}
}
</script>

<style scoped>
.product-list {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}

.product-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
margin: 8px 0;
border-bottom: 1px solid #ddd;
}

.product-name {
font-weight: bold;
font-size: 1.1em;
}

.action-links {
display: flex;
align-items: center;
}

.edit-link, .details-link, .delete-button {
margin: 0 8px;
font-size: 0.9em;
}

.edit-link, .details-link {
text-decoration: none;
color: #337ab7;
}

.delete-button {
padding: 5px 10px;
background-color: #f44336;
color: #fff;
border: none;
border-radius: 4px;
}

.delete-button:hover {
background-color: #d32f2f;
cursor: pointer;
}
</style>

<template>
<!-- The component markup -->
<div class="edit-product">
<!-- The form for editing a product. The 'submit' event is prevented and instead the 'submitForm' method is called -->
<form @submit.prevent="submitForm" class="edit-product-form">
<!-- Various input fields bound to product properties with error handling -->
<input class="input-field" v-model="product.name" placeholder="Product Name" />
<p v-if="errors.name" class="error">{{ errors.name }}</p>

<input class="input-field" v-model="product.description" placeholder="Product Description" />
<p v-if="errors.description" class="error">{{ errors.description }}</p>

<input class="input-field" v-model="product.price" placeholder="Product Price" />
<p v-if="errors.price" class="error">{{ errors.price }}</p>

<!-- Submit button -->
<button type="submit" class="submit-button">Update Product</button>
</form>
</div>
</template>

<script>
import { ref, onMounted } from 'vue'; // Importing necessary functionalities from Vue 3 Composition API
import { useRoute, useRouter } from 'vue-router'; // Importing routing functionalities
import axios from '@/axios'; // Importing axios for making HTTP requests

export default {
setup() {
// Creating a reactive reference to the product object and error messages
const product = ref({ id: null, name: '', description: '', price: '' });
const errors = ref({});

// Getting the current route instance and extracting product id from it
const route = useRoute();
product.value.id = route.params.id;

// Getting the router instance
const router = useRouter();

// Defining input validation function
const validateInput = () => {
const errorMessages = {};
if (!product.value.name) errorMessages.name = 'Name is required';
if (!product.value.description) errorMessages.description = 'Description is required';
if (!product.value.price || isNaN(product.value.price)) errorMessages.price = 'Price is required and must be a number';
return errorMessages;
};

// Defining form submission function
const submitForm = async () => {
const errorMessages = validateInput();
if (Object.keys(errorMessages).length > 0) {
errors.value = errorMessages;
return;
}

// Sending updated product data to the server
try {
await axios.put(`/products/${product.value.id}`, product.value);
// Upon successful update, redirecting to the Product List page
router.push('/');
} catch (error) {
console.error("An error occurred while updating the product:", error);
if (error.response && error.response.status === 422) {
// Handling server-side validation errors
errors.value = error.response.data.errors;
}
}
};

// Fetching product data from the server when the component is mounted
onMounted(async () => {
try {
const response = await axios.get(`/products/${product.value.id}`);
product.value.name = response.data.name;
product.value.description = response.data.description;
product.value.price = response.data.price;
} catch (error) {
console.error("An error occurred while fetching the product:", error);
}
});

// Exposing the reactive references and methods to be used within the template
return { product, submitForm, errors };
}
};
</script>


<style scoped>
.error {
color: red;
}
.edit-product {
max-width: 400px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}

.input-field {
display: block;
width: 100%;
margin: 10px 0;
padding: 10px;
font-size: 1em;
}

.submit-button {
padding: 10px 20px;
background-color: #FF9800;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

.submit-button:hover {
background-color: #e68a00;
}
</style>

<template>
<!-- Product details container -->
<!-- Use Vue's 'v-if' directive to render this container only if 'product' is truthy -->
<div v-if="product" class="product-details">
<!-- Display the product name -->
<h2 class="product-title">{{ product.name }}</h2>
<!-- Display the product description -->
<p class="product-description">{{ product.description }}</p>
<!-- Display the product price -->
<p class="product-price">Price: ${{ product.price }}</p>
</div>
</template>

<script>
import axios from '@/axios'; // Import the axios instance

export default {
// Component data
data() {
return {
// Initialize product as null
product: null
};
},
// Lifecycle hook that is called after the instance has been mounted
async mounted() {
// Get the product ID from the route params
const productId = this.$route.params.id;
try {
// Make a GET request to the API to fetch the product data
const response = await axios.get(`/products/${productId}`);
// Update the product data with the data from the API
this.product = response.data;
} catch (error) {
// If an error occurs, log it to the console
console.error("An error occurred while fetching the product:", error);
}
}
};
</script>

<style scoped>
.product-details {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}

.product-title {
margin-bottom: 20px;
font-size: 2em;
}

.product-description {
font-size: 1.2em;
}

.product-price {
margin-top: 20px;
font-size: 1.2em;
font-weight: bold;
}
</style>