Skip to content

Instantly share code, notes, and snippets.

View wobsoriano's full-sized avatar
🎯
Focusing

Robert Soriano wobsoriano

🎯
Focusing
View GitHub Profile
@wobsoriano
wobsoriano / App.vue
Last active June 8, 2025 02:44
TanStack Query + Vue Options API
<script lang="ts">
import { defineComponent, toRaw } from 'vue'
import {
QueryObserver,
type QueryKey,
type QueryObserverResult,
type QueryClient,
} from '@tanstack/query-core'
type Todo = {
userId: number
@wobsoriano
wobsoriano / useSpeechRecognition.js
Created October 31, 2020 03:06
Speech Recognition as a Vue 3 hook
import { watch, ref } from "vue";
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = "en-US";
export default function useSpeechRecognition() {
@wobsoriano
wobsoriano / user.ts
Last active April 11, 2025 03:30
Nuxt and Zod validation
import * as z from 'zod'
import { defineEventHandler, CompatibilityEvent, useQuery } from 'h3'
const userSchema = z
.object({
name: z.string().min(4, { message: 'Must be 4 or more characters long' }),
age: z.string().transform((age) => parseInt(age, 10))
})
type UnknownKeysParam = "passthrough" | "strict" | "strip";
@wobsoriano
wobsoriano / App.vue
Last active February 5, 2025 08:47
Axios cancel token as Vue hook
<template>
<button @click="ping">Ping</button>
</template>
<script setup>
import useCancelToken from './useCancelToken';
import axios from 'axios'
const cancelToken = useCancelToken();
@wobsoriano
wobsoriano / DialogProvider.vue
Last active December 19, 2024 13:25
Vuetify + Composition API Dialog component that can be used globally
<template>
<div v-frag>
<slot />
<v-dialog
v-model="isOpen"
:max-width="options.width"
:persistent="options.persistent"
>
<v-card>
<v-card-title>{{ title }}</v-card-title>
@wobsoriano
wobsoriano / hooks.client.js
Last active July 9, 2024 23:05
Server Side to Client Store Rehydration in SvelteKit (kinda)
import { user } from './store.js'
user.set(window__SK__USER__)
@wobsoriano
wobsoriano / page.vue
Created October 18, 2021 17:04
Nuxt 3 + socket.io
<script setup lang="ts">
import { io } from 'socket.io-client'
const connected = ref(false)
onMounted(() => {
const socket = io();
socket.on('connect', () => {
connected.value = socket.connected
@wobsoriano
wobsoriano / adonisjs_eslint_prettier_airbnb.md
Last active April 22, 2024 10:25 — forked from bradtraversy/eslint_prettier_airbnb.md
AdonisJS ESLint, Prettier & Airbnb Setup

AdonisJs VSCode - ESLint, Prettier & Airbnb Setup

1. Install ESLint & Prettier extensions for VSCode

Optional - Set format on save and any global prettier options

2. Install Packages

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-plugin-html eslint-config-node
@wobsoriano
wobsoriano / auth.js
Last active February 29, 2024 07:37
nuxtServerInit like implementation for Pinia
import { defineStore } from 'pinia'
export const useAuthStore = defineStore({
id: 'auth',
state: () => ({
isAuthenticated: false,
user: null
}),
actions: {
async nuxtServerInit() {
@wobsoriano
wobsoriano / proxy.ts
Last active December 22, 2023 02:25
Nuxt 3 http-proxy-middleware
// ~/server/middleware/proxy.ts
import { defineEventHandler } from 'h3'
import { createProxyMiddleware } from 'http-proxy-middleware'; // npm install http-proxy-middleware@beta
const apiProxyMiddleware = createProxyMiddleware({
target: 'https://jsonplaceholder.typicode.com',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api/todos': '/todos',