Blog

Protect Route by User ID

User How to protect route for particular user id Assistant To protect a route for a **particular user ID** in Laravel (e.g., only user with ID `1` can access it), you can use **middleware** or a **route closure check**. Here are both approaches: — ### ✅ Option 1: **Middleware Approach (Recommended for Reusability)** #### 1. […]

Vuetify portfolio carousel

User create vuetify caursel for portfolio items in which image, title and description will show Assistant Here’s how you can create a **Vuetify carousel** component to showcase **portfolio items** with an **image, title, and description** for each slide. ### ✅ Example: Portfolio Carousel in Vuetify 3 <template> <v-container> <v-carousel height="400"> <v-carousel-item v-for="(item, i) in portfolioItems" […]

Move payment field checkout

User Move payment field from order review to under order notes at checkout page Assistant To move the **payment method fields** from the **order review section** to **under the order notes** section on the WooCommerce checkout page, you can hook into the checkout fields and use `remove_action` and `add_action` smartly. Here's how to do it: […]

Checkout Page Hooks

User List all checkout page hooks Assistant In WooCommerce, the checkout page is full of action and filter hooks that allow developers to customize the process. Here's a categorized list of **key action hooks** and **filter hooks** used on the **checkout page**. — ### **Main Checkout Page Action Hooks** #### **Before & After Checkout Form** […]

Vuetify typography override fix

User @use 'sass:math'; @use 'sass:map'; @use 'sass:meta'; @use 'vuetify/lib/styles/tools/functions' as *; // This will false all colors which is not necessory for theme $color-pack: false; // Global font size and border radius $font-size-root: 1rem; $border-radius-root: 12px !default; $body-font-family: 'Roboto', sans-serif !default; $heading-font-family: $body-font-family !default; $btn-font-weight: 400 !default; $btn-letter-spacing: 0 !default; // Global Radius as per […]

V-Dialog Delete Confirmation

User add v-dialog when delete item Assistant To add a `v-dialog` confirmation when deleting an item (using Vuetify's `v-dialog`), here's a simple implementation pattern: — ### ✅ Example (Vue 3 + Vuetify 3) #### 1. **Template:** <template> <div> <v-btn color="error" @click="openDialog(item)">Delete</v-btn> <v-dialog v-model="dialog" max-width="400"> <v-card> <v-card-title class="text-h6">Confirm Deletion</v-card-title> <v-card-text>Are you sure you want to delete […]

v-select Object Issue Fix

User onMounted(async()=>{ categories.value = await fetchPortfolioCategories() as any; console.log(categories.value) }) showing object object Assistant You're seeing `[object Object]` in your “ because by default, Vuetify tries to render the item as a string, and it doesn't know how to display an object. To fix this, you need to tell Vuetify which **property** of the object […]

Sass @import to @use Migration

User Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. More info and automated migrator: https://sass-lang.com/d/import ╷ 2 │ @import 'vuetify/styles/main.sass'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ ../../../../src/scss/style.scss 2:9 root stylesheet Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. More info and automated […]

Vue TS validate fix

User Vue errors src/views/dashboards/usersection/AddPortfolio.vue:47:13 – error TS2339: Property 'valid' does not exist on type '{ valid: boolean; errors: { id: string | number; errorMessages: string[]; }[]; } | undefined'. 47 const { valid } = await form.value?.validate(); Assistant The error you're seeing: error TS2339: Property 'valid' does not exist on type '{ valid: boolean; errors: […]

Image Not Returning Debug

User import { db, storage } from '@/firebase' import { collection, addDoc, getDocs, doc, deleteDoc, updateDoc, } from 'firebase/firestore' import { ref as storageRef, uploadBytes, getDownloadURL, deleteObject, } from 'firebase/storage' const portfolioCollection = collection(db, 'portfolio'); export const addPortfolioItem = async ({ title, description, url, imageFile}: { title:string, description:string, url:string, imageFile:File}) => { try { const […]