Mykolas Mankevicius Neophen

Handle API Errors in vue spa

Code samples for the article

example_states.mov

This card is inspired by the SaladUI (which is inspired by ShadCN)

example_card.mov

Complete user authentication system including signup, signin, password management, and session handling.

Common Requirements:

	<?php

	namespace App\Providers;

	use App\Support\Utils\OctaModal;
	use App\Support\Utils\OctaResponse;
	use Illuminate\Support\Facades\Cache;
	use Illuminate\Support\Facades\Session;
	use Illuminate\Support\ServiceProvider;
	use Inertia\Inertia;

	defmodule PentoWeb.UploadLive do
	use PentoWeb, :live_view

	# @bytes_for_5MB 5_242_880
	@bytes_for_5MB 1_000_000

	@impl Phoenix.LiveView
	def mount(_params, _session, socket) do
	socket =
	socket

	export class MarkoNativeShare extends HTMLElement {
	pictureElement?: HTMLPictureElement \| null
	images?: HTMLImageElement[] \| null
	loaded = false

	connectedCallback() {
	this.pictureElement = this.querySelector('picture')
	if (!this.pictureElement) {
	throw new Error('<x-image>: requires a <picture> element')
	}

	import { LiveViewHook } from './live_view_hook'

	/*
	* Tracks height of an element when viewport resizes and sets a variable accordingly.
	*
	* Used to set the header offset.
	*/
	class HeightTrackerHook extends LiveViewHook {
	private resizeObserver: ResizeObserver \| null = null