vueuse-integrations-skilld

Name: vueuse-integrations-skilld
Author: skilld-dev

173stars8forks

How to install vueuse-integrations-skilld?

skilld-dev/vue-ecosystem-skills/vueuse-integrations-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill vueuse-integrations-skilld

Installs into the current project.

Summary

Integration wrappers for utility libraries. ALWAYS use when writing code importing \"@vueuse/integrations\". Consult for debugging, best practices, or modifying @vueuse/integrations, vueuse/integrations, vueuse integrations, vueuse.

Files · 1

View on GitHub

SKILL.md

1	# vueuse/vueuse `@vueuse/integrations@14.3.0`
2	Tags: next: 5.0.0, alpha: 14.0.0-alpha.3, beta: 14.0.0-beta.1
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes — prioritize recent major/minor releases.
8
9	- BREAKING: Requires Vue 3.5+ — v14.x now requires Vue 3.5.0 as a peer dependency for native features like `useTemplateRef`
10
11	- BREAKING: ESM-only — dropped CommonJS (CJS) build in v13.0.0, now an ESM-only package [source](./references/releases/v13.0.0.md)
12
13	- BREAKING: `focus-trap` dependency — `useFocusTrap` updated peer dependency range to `^7 \|\| ^8` in v14.2.0 [source](./references/releases/v14.2.0.md)
14
15	- BREAKING: `universal-cookie` dependency — `useCookies` now supports and prefers `universal-cookie` `^7 \|\| ^8`
16
17	- BREAKING: `change-case` v5 — `useChangeCase` is now compatible with `change-case` v5, including internal naming changes
18
19	- DEPRECATED: Alias exports — v14.0.0 deprecated alias exports in favor of original function names for consistency [source](./references/releases/v14.0.0.md)
20
21	- NEW: `watchElement` option — `useSortable` added `watchElement` in v14.2.0 to auto-reinitialize when target element changes [source](./references/releases/v14.2.0.md)
22
23	- NEW: `updateContainerElements` — `useFocusTrap` exposed `updateContainerElements` in v13.6.0 for dynamic container updates [source](./references/releases/v13.6.0.md)
24
25	- NEW: `serializer` option — `useIDBKeyval` added `options.serializer` in v13.6.0 for custom data serialization [source](./references/releases/v13.6.0.md)
26
27	- NEW: Component Ref support — `useSortable` can now accept a Vue component instance/ref as the target element since v13.1.0 [source](./references/releases/v13.1.0.md)
28
29	- NEW: Thenable `useAxios` — `useAxios` returns are now thenable, allowing `await useAxios(...)` in async contexts [source](./references/docs/useAxios/index.md)
30
31	- NEW: Flexible `execute` — `useAxios` `execute()` can now take `url` or `config` separately for manual triggers [source](./references/docs/useAxios/index.md)
32
33	- NEW: `initialData` option — `useAxios` added `initialData` to provide a default value before the request finishes [source](./references/docs/useAxios/index.md)
34
35	- NEW: Helper functions — `moveArrayElement`, `insertNodeAt`, and `removeNode` are now exported from `useSortable` [source](./references/docs/useSortable/index.md)
36
37	Also changed: `useAsyncValidator` internal types · `useJwt` options refinement · `useNProgress` reactive state consistency · `useSortable` type misalignment fix [source](./references/releases/v13.3.0.md)
38
39	## Best Practices
40
41	- Import functions from submodules to maximize tree-shaking efficiency and reduce the final bundle size [source](./references/docs/README.md)
42
43	```ts
44	// Preferred
45	import { useAxios } from '@vueuse/integrations/useAxios'
46
47	// Avoid
48	import { useAxios } from '@vueuse/integrations'
49	```
50
51	- Await `useAxios()` directly for one-off requests as the return value is thenable, simplifying promise handling [source](./references/docs/useAxios/index.md)
52
53	```ts
54	const { data, error } = await useAxios('/api/posts')
55	```
56
57	- Enable `resetOnExecute: true` in `useAxios` options to clear stale data automatically when a new request is triggered [source](./references/docs/useAxios/index.md)
58
59	```ts
60	const { execute } = useAxios('/api/data', { method: 'GET' }, { resetOnExecute: true })
61	```
62
63	- Explicitly import `useCookies` in Nuxt 3 environments to avoid name collisions with Nuxt's built-in `useCookie` composable [source](./references/docs/useCookies/index.md)
64
65	```ts
66	import { useCookies } from '@vueuse/integrations/useCookies'
67	```
68
69	- Use `autoUpdateDependencies: true` with `useCookies` to automatically track and update dependencies for any cookie names accessed via `.get()` [source](./references/docs/useCookies/index.md)
70
71	```ts
72	const { get } = useCookies(['initial'], { autoUpdateDependencies: true })
73	```
74
75	- Enable the `watchElement: true` option in `useSortable` to automatically reinitialize the instance when the target element changes (e.g., with `v-if`) [source](./references/docs/useSortable/index.md)
76
77	```ts
78	useSortable(el, list, { watchElement: true })
79	```
80
81	- Wrap post-update logic in `nextTick()` after calling `moveArrayElement` in `useSortable` to ensure the DOM update has fully finished [source](./references/docs/useSortable/index.md)
82
83	```ts
84	useSortable(el, list, {
85	onUpdate: (e) => {
86	moveArrayElement(list, e.oldIndex, e.newIndex)
87	nextTick(() => { /* perform post-move logic */ })
88	}
89	})
90	```
91
92	- Use `nextTick()` before calling `activate()` in `useFocusTrap` when dealing with condit

People who liked this also viewed

6 picks

Type

vueuse-integrations-skilld

173stars8forks

View on GitHub

How to install vueuse-integrations-skilld?

skilld-dev/vue-ecosystem-skills/vueuse-integrations-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill vueuse-integrations-skilld

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# vueuse/vueuse `@vueuse/integrations@14.3.0`
2	Tags: next: 5.0.0, alpha: 14.0.0-alpha.3, beta: 14.0.0-beta.1
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes — prioritize recent major/minor releases.
8
9	- BREAKING: Requires Vue 3.5+ — v14.x now requires Vue 3.5.0 as a peer dependency for native features like `useTemplateRef`
10
11	- BREAKING: ESM-only — dropped CommonJS (CJS) build in v13.0.0, now an ESM-only package [source](./references/releases/v13.0.0.md)
12
13	- BREAKING: `focus-trap` dependency — `useFocusTrap` updated peer dependency range to `^7 \|\| ^8` in v14.2.0 [source](./references/releases/v14.2.0.md)
14
15	- BREAKING: `universal-cookie` dependency — `useCookies` now supports and prefers `universal-cookie` `^7 \|\| ^8`
16
17	- BREAKING: `change-case` v5 — `useChangeCase` is now compatible with `change-case` v5, including internal naming changes
18
19	- DEPRECATED: Alias exports — v14.0.0 deprecated alias exports in favor of original function names for consistency [source](./references/releases/v14.0.0.md)
20
21	- NEW: `watchElement` option — `useSortable` added `watchElement` in v14.2.0 to auto-reinitialize when target element changes [source](./references/releases/v14.2.0.md)
22
23	- NEW: `updateContainerElements` — `useFocusTrap` exposed `updateContainerElements` in v13.6.0 for dynamic container updates [source](./references/releases/v13.6.0.md)
24
25	- NEW: `serializer` option — `useIDBKeyval` added `options.serializer` in v13.6.0 for custom data serialization [source](./references/releases/v13.6.0.md)
26
27	- NEW: Component Ref support — `useSortable` can now accept a Vue component instance/ref as the target element since v13.1.0 [source](./references/releases/v13.1.0.md)
28
29	- NEW: Thenable `useAxios` — `useAxios` returns are now thenable, allowing `await useAxios(...)` in async contexts [source](./references/docs/useAxios/index.md)
30
31	- NEW: Flexible `execute` — `useAxios` `execute()` can now take `url` or `config` separately for manual triggers [source](./references/docs/useAxios/index.md)
32
33	- NEW: `initialData` option — `useAxios` added `initialData` to provide a default value before the request finishes [source](./references/docs/useAxios/index.md)
34
35	- NEW: Helper functions — `moveArrayElement`, `insertNodeAt`, and `removeNode` are now exported from `useSortable` [source](./references/docs/useSortable/index.md)
36
37	Also changed: `useAsyncValidator` internal types · `useJwt` options refinement · `useNProgress` reactive state consistency · `useSortable` type misalignment fix [source](./references/releases/v13.3.0.md)
38
39	## Best Practices
40
41	- Import functions from submodules to maximize tree-shaking efficiency and reduce the final bundle size [source](./references/docs/README.md)
42
43	```ts
44	// Preferred
45	import { useAxios } from '@vueuse/integrations/useAxios'
46
47	// Avoid
48	import { useAxios } from '@vueuse/integrations'
49	```
50
51	- Await `useAxios()` directly for one-off requests as the return value is thenable, simplifying promise handling [source](./references/docs/useAxios/index.md)
52
53	```ts
54	const { data, error } = await useAxios('/api/posts')
55	```
56
57	- Enable `resetOnExecute: true` in `useAxios` options to clear stale data automatically when a new request is triggered [source](./references/docs/useAxios/index.md)
58
59	```ts
60	const { execute } = useAxios('/api/data', { method: 'GET' }, { resetOnExecute: true })
61	```
62
63	- Explicitly import `useCookies` in Nuxt 3 environments to avoid name collisions with Nuxt's built-in `useCookie` composable [source](./references/docs/useCookies/index.md)
64
65	```ts
66	import { useCookies } from '@vueuse/integrations/useCookies'
67	```
68
69	- Use `autoUpdateDependencies: true` with `useCookies` to automatically track and update dependencies for any cookie names accessed via `.get()` [source](./references/docs/useCookies/index.md)
70
71	```ts
72	const { get } = useCookies(['initial'], { autoUpdateDependencies: true })
73	```
74
75	- Enable the `watchElement: true` option in `useSortable` to automatically reinitialize the instance when the target element changes (e.g., with `v-if`) [source](./references/docs/useSortable/index.md)
76
77	```ts
78	useSortable(el, list, { watchElement: true })
79	```
80
81	- Wrap post-update logic in `nextTick()` after calling `moveArrayElement` in `useSortable` to ensure the DOM update has fully finished [source](./references/docs/useSortable/index.md)
82
83	```ts
84	useSortable(el, list, {
85	onUpdate: (e) => {
86	moveArrayElement(list, e.oldIndex, e.newIndex)
87	nextTick(() => { /* perform post-move logic */ })
88	}
89	})
90	```
91
92	- Use `nextTick()` before calling `activate()` in `useFocusTrap` when dealing with condit

People who liked this also viewed

6 picks

Type