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 / eager-computed-options-alt.ts
Last active September 14, 2023 08:59
Eager Vue computed property - use for cheap computed properties that always update but that don't trigger updates when their value doesn't change
export function useEagerComputed() {
const properties = []
function eagerComputed(definitions) {
const computedProps = {}
for (const key in definitions) {
const effect = definitions[key]
properties.push({ key, effect })
computedProps[key] = function () {
return this.$data[key]
@Akryum
Akryum / List.vue
Created December 15, 2019 14:40
Vue - onScrollBottom composable function
<script>
import { ref } from '@vue/composition-api'
import { onScrollBottom } from '@/scroll'
export default {
setup () {
function loadMore () {
// ...
}
@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>