Skip to content

Instantly share code, notes, and snippets.

View Akryum's full-sized avatar
☮️
Meow

Guillaume Chau Akryum

☮️
Meow
View GitHub Profile
@Akryum
Akryum / reactiveUrlQuery.ts
Created July 10, 2024 14:12
Reactive Url Query read & write object that can be used in Nuxt and in several components at the same time
import { useUrlSearchParams as useVueUseUrlSearchParams } from '@vueuse/core'
const paramsInstances = new Map<string, ReturnType<typeof useVueUseUrlSearchParams>>()
export function useRouteQuery<T extends Record<string, any> = Record<string, any>>(key?: string) {
if (import.meta.server) {
return useRoute().query as T
}
const finalKey = key ?? window.location.pathname
@Akryum
Akryum / IframeKeepAlive.vue
Last active May 23, 2024 09:17
An iframe that will not reload when mounted on the page again (based on `src`).
<script lang="ts">
const iframes = new Map<string, { iframe: HTMLIFrameElement, src: string }>()
</script>
<script lang="ts" setup>
import { useAttrs, ref, shallowRef, watchEffect, onMounted, onBeforeUnmount } from 'vue'
import { useElementBounding } from '@vueuse/core'
defineOptions({
inheritAttrs: false,
@Akryum
Akryum / userChrome.css
Created September 23, 2023 19:33
Under Gnome
#tabbrowser-tabs {
visibility: collapse;
}
#navigator-toolbox {
display: flex;
flex-flow: row wrap;
}
#titlebar {
order: 1;
max-width: 44px;
{
"settings": {
"nativeScrollbars": true,
"nativeScrollbarsThin": true,
"nativeScrollbarsLeft": false,
"selWinScreenshots": true,
"updateSidebarTitle": true,
"markWindow": false,
"markWindowPreface": "[Sidebery] ",
"ctxMenuNative": true,
#tabbrowser-tabs {
visibility: collapse;
}
#navigator-toolbox {
display: flex;
flex-flow: row wrap;
}
#titlebar {
order: 1;
max-width: 146px;
@Akryum
Akryum / gist:6bab33ad28b4b786cc5fe85c20b2585a
Created September 29, 2022 10:21
RegExp to find dynamic Vue component imports
=\s\(\) => import\([\s\n]*(\/\*.*?\*\/[\s\n]*)?'.*?\.vue'[\s\n]*\)
@Akryum
Akryum / a.ts
Last active September 16, 2022 15:04
Typed Meteor Methods and subscriptions
import { updateLobby, subscribeToLobby } from './lobby'
// ...
updateLobby('some-id', { title: 'Foo' })
subscribeToLobby('xxx-xxx-xxx')
@Akryum
Akryum / Before.vue
Last active June 27, 2022 08:18
Vue 3: Detect content inside slots
<!-- Doesn't work with Vue 2 scoped slots nor Vue 3 slots in some cases -->
<template>
<div>
<div v-if="$slots.foo">
<slot name="foo" title="Title" />
</div>
</div>
</template>
<template>
<VDropdown>
<button>Menu</button>
<template #popper="{ hide }">
<RunSelector
@close="hide()"
/>
</template>
</VDropdown>
<script setup>
import { ref, computed } from 'vue'
import gql from 'graphql-tag'
import { client } from './weather'
const document = gql`query getCityWeather ($name: String!) {
city: getCityByName (name: $name) {
id
name
country