Blog

Vue Router in Pinia

User // stores/auth.ts import { defineStore } from 'pinia'; import { useRouter } from 'vue-router'; const router = useRouter(); interface User { id: number; name: string; email: string; } export const useAuthStore = defineStore('auth', { state: () => ({ user: localStorage.getItem('user') ? (JSON.parse(localStorage.getItem('user')!) as User) : null, token: localStorage.getItem('token') || null, }), getters: { isAuthenticated: […]

Laravel Registration OTP Verification

User <script> import { ref,shallowRef,inject } from "vue"; import { useForm, useField } from 'vee-validate' import SingleColumn from '@/layouts/SingleColumn.vue'; const apiUrl = inject('apiUrl'); console.log(apiUrl); const step = ref(1); const items = [ 'Sign Up', 'Otp', 'Login', ] const otp = shallowRef('') const { handleSubmit, handleReset, values } = useForm({ validationSchema: { name (value) { if […]

Sanctum API Registration Laravel

User How to register api using santctum in laravel 11 when not api.php file provided Assistant In Laravel 11, the `api.php` file is no longer provided by default. However, you can still register API routes for Sanctum by defining them inside the `routes/web.php` file or by creating a separate file for API routes. ### **Steps […]

Global Variables in Vue 3

User define global variables in vue 3 like api url Assistant In Vue 3, you can define global variables like an API URL using several approaches. Here are the most common methods: — ### **1. Using `app.config.globalProperties` (Recommended for Vue Apps)** import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); […]

Change DDEV Port Issue

User Starting syt… Container ddev-ssh-agent Recreate Container ddev-ssh-agent Recreated Container ddev-ssh-agent Started ssh-agent container is running: If you want to add authentication to the ssh-agent container, run 'ddev auth ssh' to enable your keys. Building project images…… Project images built in 4s. Container ddev-syt-adminer Stopped Container ddev-syt-db Recreate Container ddev-syt-db Recreated Container ddev-syt-adminer Created Container […]

Vuetify Stepper Content Fix

User <script> import { ref,shallowRef } from "vue"; import { useForm, useField } from 'vee-validate' import IconLoading from '../components/icons/IconLoading.vue'; import SingleColumn from '../layouts/SingleColumn.vue'; const otp = shallowRef('') const { handleSubmit, handleReset, values } = useForm({ validationSchema: { name (value) { if (value?.length >= 2) return true return 'Name needs to be at least 2 characters.' […]

Email Validation Regex Fix

User <script> import { ref } from "vue"; import { useForm, useField } from 'vee-validate' import IconLoading from '../components/icons/IconLoading.vue'; import SingleColumn from '../layouts/SingleColumn.vue'; const { handleSubmit, handleReset } = useForm({ validationSchema: { name (value) { if (value?.length >= 2) return true return 'Name needs to be at least 2 characters.' }, email (value) { if […]

User Registration Form Update

User <script> import { ref } from "vue"; import { useForm, useField } from 'vee-validate' import IconLoading from '../components/icons/IconLoading.vue'; import SingleColumn from '../layouts/SingleColumn.vue'; const { handleSubmit, handleReset } = useForm({ validationSchema: { name (value) { if (value?.length >= 2) return true return 'Name needs to be at least 2 characters.' }, email (value) { if […]

Vue Stepper Component Review

User Assistant Your “ component is structured correctly, and it sets the active step to **step 2 (Verify User [plugin:vite:import-analysis] Failed to resolve import "vee-validate" from "src/views/RegisterView.vue". Does the file exist? Assistant The error `[plugin:vite:import-analysis] Failed to resolve import "vee-validate" from "src/views/RegisterView.vue"` usually occurs when Vite cannot find the `vee-validate` package. Here are some steps […]

Vuetify Stepper Form Implementation

User add register form in step 1 in step2 otp verification Assistant Here's an improved Vue 3 “ component using Vuetify that includes: – A **registration form** in Step 1 – **OTP verification** in Step 2 – A simple **login button** in Step 3 — ### Features: – Uses `v-form` for validation – Implements a […]