Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matijaoe/vue-ecosystem-snippets
🟢 VSCode snippets for the modern Vue ecosystem - including Nuxt 3, Pinia, VueUse, Vue Macros & Vue Router.
https://github.com/matijaoe/vue-ecosystem-snippets
deno nuxt vscode vscode-extension vscode-snippets vue vueuse
Last synced: about 13 hours ago
JSON representation
🟢 VSCode snippets for the modern Vue ecosystem - including Nuxt 3, Pinia, VueUse, Vue Macros & Vue Router.
- Host: GitHub
- URL: https://github.com/matijaoe/vue-ecosystem-snippets
- Owner: matijaoe
- License: mit
- Created: 2022-12-30T15:52:36.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-28T17:05:18.000Z (about 1 year ago)
- Last Synced: 2023-10-29T14:42:22.524Z (about 1 year ago)
- Topics: deno, nuxt, vscode, vscode-extension, vscode-snippets, vue, vueuse
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=matijao.vue-nuxt-snippets
- Size: 81.1 KB
- Stars: 28
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Vue Ecosystem Snippets
> Snippets for the modern Vue ecosystem - including Nuxt 3, Pinia, VueUse, Vue Router & Vue Macros.
## Features
- Only the latest Vue syntax
- Over **200** snippets
- TypeScript-first
- Nuxt 3, Pinia, VueUse, Vue Router & Vue Macros support
- Strategically placed tabstops
- Prefixes created with exact-match in mind
- GitHub Copilot compliant
- Auto-generated documentation
## Setup
Not mandatory, but highly recommended.
Look for it in user settings, or edit the settings.json directly:
```jsonc
"editor.formatOnSave": true,
// Tab complete snippets when their prefix match.
"editor.tabCompletion": "onlySnippets"
```
## Snippet syntax
### Tabstops
- `$1`, `$2`, `$3` specify cursor locations, in order in which tabstops will be visited
- `$0` denotes the final cursor position
- Multiple occurrences of the same tabstop are linked and updated in sync
### Placeholders
- Tabstops with default values → `${1:name}`
### Choices
- Tabstops with multiple values → `${1|one,two,three|}`.
- Truncated in documentation, for easier viewing → `${1|one,...|}`.
## Snippets
### Vue SFC
`.vue` files
Prefix
Name
Body
vbase
Vue SFC
```html
$0
$1
```
vbase:full
Vue SFC with style | postcss
```html
$0
$1
```
vbase:full:css
Vue SFC with style | css
```html
$0
$1
```
vbase:full:scss
Vue SFC with style | scss
```html
$0
$1
```
vbase:full:less
Vue SFC with style | less
```html
$0
$1
```
vscript
Vue script setup | ts
```html
$0
```
vscript:js
Vue script setup | js
```html
$0
```
vtemplate
Vue template
```html
$0
```
vstyle
Vue scoped style | postcss
```html
$0
```
vstyle:lang
Vue style with language option
```html
$0
```
vstyle:css
Vue scoped style | css
```html
$0
```
vstyle:scss
scoped style | scss
```html
$0
```
vstyle:less
scoped style | less
```html
$0
```
vstyle:module
Vue style with CSS modules
```html
$0
```
vstyle:src
Vue scoped style with src
```html
$0
```
### Template
Prefix
Name
Body
slot
slot
```html
$0
```
template / vtemplate
template
```html
$0
```
component / vcomponent
component
```html
$0
```
nslot
named slot
```html
$0
```
ntemplate
named template
```html
$0
```
vcomponent
Vue component
```html
$0
```
vKeepAlive
Vue KeepAlive
```html
$0
```
vTeleport
Vue teleport
```html
$0
```
vTransition
Vue Transition
```html
$0
```
vTransition:name / nTransition
Vue Transition with name
```html
$0
```
vTransition:type
Vue Transition with type
```html
$0
```
vTransition:appear
Vue Transition with appear
```html
$0
```
vTransitionGroup
Vue TransitionGroup
```html
$0
```
vSuspense
Vue Suspense
```html
$0
```
vSuspense:fallback
Vue Suspense with fallback
```html
$0
$1
```
vtext
v-text
```html
v-text="$1"
```
vhtml
v-html
```html
v-html="$1"
```
vshow
v-show
```html
v-show="$1"
```
vif / if
v-if
```html
v-if="$1"
```
veif / elif
v-else-if
```html
v-else-if="$1"
```
velse / else
v-else
```html
v-else
```
vfor
v-for
```html
v-for="${2:item} in ${1:items}" :key="$2$3"
```
vfori
v-for (indexed)
```html
v-for="(${2:item}, ${3:i}) in ${1:items}" :key="${4:$3}"
```
vforr
v-for range
```html
v-for="${1:n} in ${2:5}" :key="$1"
```
vemit / emit
emit
```html
emit('$1'$2)
```
vemit:pass
Vue pass emit
```html
@${1|click,input,...|}="\$emit('${2:$1}', \$event)"
```
von
v-on
```html
v-on="${1:emits}"
```
von:event / voe
event handler
```html
@$1="$2"
```
von:click / voc
click handler
```html
@click="${1:onClick}"
```
von:input / voi
input handler
```html
@input="${1:onInput}"
```
von:update
update handler
```html
@update="${1:onUpdate}"
```
von:change
change handler
```html
@change="${1:onChange}"
```
von:blur
blur handler
```html
@blur="${1:onBlur}"
```
von:focus
focus handler
```html
@focus="${1:onFocus}"
```
von:submit
submit handler
```html
@submit${1:.prevent}="${2:onSubmit}"
```
vbind
v-bind
```html
v-bind="$1"
```
vbind:attrs
v-bind attrs
```html
v-bind="\$attrs"
```
vbind:props
v-bind props
```html
v-bind="\$props"
```
vbind:full
v-bind props and attrs
```html
v-bind="[\$props, \$attrs]"
```
vmodel
v-model
```html
v-model="$1"
```
vmodel:number
v-model.number
```html
v-model.number="$1"
```
vmodel:trim
v-model.trim
```html
v-model.trim="$1"
```
vmodel:custom
custom v-model
```html
v-model:${1:custom}="$2"
```
vslot
scoped slot
```html
v-slot="{$1}"
```
vpre
v-pre
```html
v-pre="$1"
```
vonce
v-once
```html
v-once
```
vmemo
v-memo
```html
v-memo="[$1]"
```
vcloak
v-cloak
```html
v-cloak
```
vkey
Vue key
```html
:key="$1"
```
vref
Vue ref
```html
ref="$1"
```
vname
name property
```html
${1|name,:name|}="$2"
```
vis
is property
```html
${1|is,:is|}="$2"
```
vb
bind attribute
```html
:${1:prop}="${2:$1}"
```
va
attribute
```html
${1:prop}="$2"
```
vclass / vc
Vue classes
```html
:class="$1"
```
vclass:list / vca
Vue classes list
```html
:class="[$1]"
```
vclass:cond / vcc
Vue conditional classes
```html
:class="{ $1: $2 }"
```
vstyle
Vue inline style
```html
:style="{ $1: $2 }"
```
vstyle:list
Vue inline style list
```html
:style="[$1]"
```
vv
Vue
```html
{{ $1 }}
```
vvt
Vue i18n translation
```html
{{ t('$1') }}
```
vif:slot
v-if slot defined
```html
v-if="\$slots.${1:default}"
```
vif:slot-prop
v-if slot or prop defined
```html
v-if="\$slots.${1:label} || ${2:$1}"
```
vform
form submit.prevent
```html
$0
```
vfor:template
v-for in template
```html
<${1|template,div,...|} v-for="${3:item} in ${2:items}" :key="$3$4">
$0
$1>
```
vfori:template
v-for (indexed) in template
```html
<${1|template,div,...|} v-for="(${3:item}, ${4:i}) in ${2:items}" :key="${5:$4}">
$0
$1>
```
vif:template
v-if in template
```html
<${1|template,div,...|} v-if="$2">
$0
$1>
```
vtif
template with v-if
```html
$0
```
vdif
div with v-if
```html
$0
```
### Style
Prefix
Name
Body
vbind
v-bind
```css
v-bind($0)
```
deep
:deep()
```css
:deep($1)
```
slot
:slotted()
```css
:slotted($1)
```
global
:global()
```css
:global($1)
```
### Script
Script setup and composables
Prefix
Name
Body
vref / vr
Vue ref
```javascript
const ${1:name} = ref($2)
```
vref:ts / vrt
Vue ref (typed)
```javascript
const ${1:name} = ref<$2>($3)
```
vcomputed / vc
Vue computed
```javascript
const ${1:name} = computed(() => $2)
```
vcomputed:ts / vct
Vue computed (typed)
```javascript
const ${1:name} = computed<$2>(() => $3)
```
vcomputed:gs / vcgs
Vue computed (get/set)
```javascript
const ${1:name} = computed({
get: () => ${2},
set: (${3:value}: ${4:string}) => {
${5}
},
})
```
vreactive / vra
Vue reactive
```javascript
const ${1:name} = reactive({$2})
```
vreactive:ts
Vue reactive (typed)
```javascript
const ${1:name}: ${2:type} = reactive({$3})
```
vshallowRef
Vue shallowRef
```javascript
const ${1:name} = shallowRef($2)
```
vtoRef
Vue toRef
```javascript
toRef(${1:props}, '$2')
```
vtoRefs
Vue toRefs
```javascript
toRefs(${1:props})
```
vunref
Vue unref
```javascript
unref($1)
```
vreadonly
Vue readonly
```javascript
readonly(${1:object})
```
vref:elem
Vue element ref
```javascript
const ${1:elem} = ref<${2|HTMLInputElement,HTMLInputElement,...|} | null>(null)
```
vwatchEffect
Vue watchEffect
```javascript
watchEffect(() => {
$0
})
```
vwatch
Vue watch source
```javascript
watch(${1:source}, (${2:val}) => {
$0
})
```
vwatch:inline
Vue watch inline
```javascript
watch(${1:source}, ${2:fn})
```
vwatch:getter
Vue watch getter
```javascript
watch(() => ${1:source}, (${2:val}) => {
$0
})
```
vwatch:multiple
Vue watch multiple
```javascript
watch([${1:source1}, ${2:source2}], ([new${1/(.*)/${1:/capitalize}/}, new${2/(.*)/${1:/capitalize}/}]) => {
$0
})
```
vwatch:immediate
Vue watch immediate
```javascript
watch(${1:source}, (${2:val}) => {
$0
}, { immediate: true })
```
vwatch:deep
Vue watch deep
```javascript
watch(${1:source}, (${2:val}) => {
$0
}, { deep: true })
```
vwatch:log / vwl
Vue watch source | log
```javascript
watch(${1:source}, (${2:val}) => {
console.log('$1:', $2)
})
```
vprops
Vue defineProps
```javascript
${1:const props = }defineProps<${2:Props}>()
```
vprops:defaults
Vue defineProps with defaults
```javascript
${1:const props = }withDefaults(defineProps<${2:Props}>(), {
$0
})
```
vprops:js
Vue defineProps without TS
```javascript
${1:const props = }defineProps({
$2
})
```
vemits
Vue defineEmits
```javascript
${1:const emit = }defineEmits<{
${2:click}: [${3:payload}: ${4:string}],$5
}>()
```
vemits:alt
Vue defineEmits without TS
```javascript
${1:const emit = }defineEmits(['$2'])
```
vemits:old
Vue defineEmits (old syntax)
```javascript
${1:const emit = }defineEmits<{
(e: '${2:click}', ${3:payload}: ${4:string}): void,$5
}>()
```
vmodel
Vue defineModel
```javascript
const ${1:modelValue} = defineModel<${2:string}>($3)
```
vemit
Vue emit event
```javascript
emit('$1'$2)
```
vexpose
Vue defineExpose
```javascript
defineExpose({
$1
})
```
v:onMounted
Vue onMounted
```javascript
onMounted(() => {
$0
})
```
v:onBeforeMount
Vue onBeforeMount
```javascript
onBeforeMount(() => {
$0
})
```
v:onUnmounted
Vue onUnmounted
```javascript
onUnmounted(() => {
$0
})
```
v:onBeforeUnmount
Vue onBeforeUnmount
```javascript
onBeforeUnmount(() => {
$0
})
```
v:onUpdated
Vue onUpdated
```javascript
onUpdated(() => {
$0
})
```
v:onBeforeUpdate
Vue onBeforeUpdate
```javascript
onBeforeUpdate(() => {
$0
})
```
v:onErrorCaptured
Vue onErrorCaptured
```javascript
onErrorCaptured(() => {
$0
})
```
v:onActivated
Vue onActivated
```javascript
onActivated(() => {
$0
})
```
v:onDeactivated
Vue onDeactivated
```javascript
onDeactivated(() => {
$0
})
```
vprovide
Vue provide
```javascript
provide(${1:key}, ${2:value})
```
vprovide:ts
Vue provide (typed)
```javascript
provide<${1:string}>(${2:key}, ${3:value})
```
vinject
Vue inject
```javascript
const ${1:value} = inject(${2:key})
```
vinject:ts
Vue inject (typed)
```javascript
const ${1:value} = inject<${2:string}>(${3:key})
```
vinject:default
Vue inject with default
```javascript
const ${1:value} = inject(${2:key}, ${3:defaultValue})
```
vinjectkey
Vue injection key
```javascript
const ${1:key} = Symbol('$2') as InjectionKey<${3:string}>
```
vslots
Vue useSlots
```javascript
const slots = useSlots()
```
vattrs
Vue useAttrs
```javascript
const attrs = useAttrs()
```
vimport / vim
Import from vue
```javascript
import { $1 } from 'vue'
```
### Code snippets
Useful vue snippets and helpers
Prefix
Name
Body
vcomposable / vdc
Vue define composable
```javascript
export const use${1/(.*)/${1:/pascalcase}/} = () => {
$0
return {
}
}
```
vcomposable:file / vdcf
Vue define composable in file
```javascript
export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/} = () => {
$0
return {
}
}
```
vuse / vu
Use composable
```javascript
const ${2:$1} = use${1/(.*)/${1:/capitalize}/}($3)
```
vused / vud
Use composable with destructuring
```javascript
const { $2 } = use${1/(.*)/${1:/capitalize}/}($3)
```
vmodel:manual
Implement v-model manually
```javascript
const props = defineProps<{
${1:modelValue}: ${2:string}
}>()
const emit = defineEmits<{
(e: 'update:$1', ${3:value}?: $2): void
}>()
const ${4:value} = computed({
get: () => props.$1,
set: (val: $2) => emit('update:$1', val),
})
```
v:has-slot
Vue check for slots
```javascript
const slots = useSlots()
const hasSlot = (name: string) => !!slots[name]
```
### Vue Router (script)
Prefix
Name
Body
vrouter
Vue router
```javascript
const ${1:router} = useRouter()
```
vroute
Vue route
```javascript
const ${1:route} = useRoute()
```
vrouter:create
Create Vue router
```javascript
const router = createRouter({
history: createWebHashHistory(),
routes: ${1:routes},
scrollBehavior(to, from, savedPosition) {
$2
}
})
```
### Vue Router (template)
Prefix
Name
Body
vto
Vue Router to
```html
${1|to,:to|}="$2"
```
vto:param
Vue Router :to with param
```html
:to="`$1${${2:id}}$3`"
```
vto:obj
Vue Router :to object
```html
:to="{ $1 }"
```
vto:name
Vue Router :to name
```html
:to="{ name: '$1',$2 }"
```
vto:path
Vue Router :to path
```html
:to="{ path: '$1',$2 }"
```
vview
RouterView
```html
$0
```
vlink
RouterLink
```html
$3
```
vlink:param
RouterLink with param
```html
$4
```
vlink:obj
RouterLink with object
```html
$2
```
vlink:name
RouterLink with name
```html
$3
```
vlink:path
RouterLink with path
```html
$3
```
### Pinia
Prefix
Name
Body
pstore
Setup Pinia store
```javascript
import { defineStore } from 'pinia'
export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', () => {
$0
return {
}
})
```
pstore:options
Setup Pinia store (Options)
```javascript
import { defineStore } from 'pinia'
export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', {
state: () => ({
$0
}),
getters: {},
actions: {},
})
```
vuseStore / vus
Use store
```javascript
const ${2:$1Store} = use${1/(.*)/${1:/capitalize}/}Store()
```
### Nuxt (script)
Prefix
Name
Body
nfetch
Nuxt useFetch
```javascript
const { data: ${1:data} } = await useFetch('$2'$3)
```
nfetch:cb
Nuxt useFetch with callback
```javascript
const { data: ${1:data} } = await useFetch(() => '$2'$3)
```
nfetch:lazy
Nuxt useLazyFetch
```javascript
const { pending, data: ${1:data} } = useLazyFetch('$2'$3)
```
nfetch:lazy:cb
Nuxt useLazyFetch callback
```javascript
const { pending, data: ${1:data} } = useLazyFetch(() => '$2'$3)
```
nfetch:post
Nuxt useFetch POST
```javascript
const { data: ${1:data} } = await useFetch('$2', {
method: 'POST',
body: ${3:body},$4
})
```
nasyncdata
Nuxt useAsyncData
```javascript
const { data: ${1:data} } = await useAsyncData('${2:key}', () => $fetch('$3')$4)
```
nasyncdata:lazy
Nuxt useLazyAsyncData
```javascript
const { pending, data: ${1:data} } = useLazyAsyncData('${2:key}', () => $fetch('$3')$4)
```
napp
Nuxt useNuxtApp
```javascript
const app = useNuxtApp()
```
nappConfig
Nuxt useAppConfig
```javascript
const appConfig = useAppConfig()
```
nruntimeConfig
Nuxt useRuntimeConfig
```javascript
const config = useRuntimeConfig()
```
ncookie
Nuxt useCookie
```javascript
const ${1:cookie} = useCookie('${2:$1}'$3)
```
ncookie:opts
Nuxt useCookie with options
```javascript
const ${1:cookie} = useCookie('${2:$1}', { $3 })
```
ndata
Nuxt useNuxtData
```javascript
const { data: ${2:$1} } = useNuxtData('${1:key}')
```
nerror
Nuxt useError
```javascript
const ${1:error} = useError()
```
nstate
Nuxt useState
```javascript
const ${1:state} = useState('${2:$1}'$3)
```
nstate:init
Nuxt useState (init)
```javascript
const ${1:state} = useState('${2:$1}', () => $3)
```
nhead
Nuxt useHead
```javascript
useHead({
$1
})
```
nhead:title
Nuxt useHead title
```javascript
useHead({
title: $1,$0
})
```
npageMeta
Nuxt definePageMeta
```javascript
definePageMeta({
$1
})
```
npageMeta:title
Nuxt definePageMeta title
```javascript
definePageMeta({
title: '$1',$0
})
```
npageMeta:layout
Nuxt definePageMeta layout
```javascript
definePageMeta({
layout: '$1',$0
})
```
npageMeta:middleware
Nuxt definePageMeta middleware
```javascript
definePageMeta({
middleware: ['$1'$2],$0
})
```
nto
Nuxt navigateTo
```javascript
navigateTo('$1'$2)
```
nto:obj
Nuxt navigateTo object
```javascript
navigateTo({ $1 }$2)
```
nto:replace
Nuxt navigateTo replace
```javascript
navigateTo('$1', { replace: true })
```
nto:external
Nuxt navigateTo external
```javascript
navigateTo('$1', { external: true })
```
nto:redirect
Nuxt navigateTo redirect
```javascript
navigateTo('$1', { redirectCode: ${2|301,302,...|} })
```
nto:name
Nuxt navigateTo name
```javascript
navigateTo({
name: '$1',$0
})
```
nto:path
Nuxt navigateTo path
```javascript
navigateTo({
path: '$1',$0
})
```
nplugin
Nuxt plugin
```javascript
export default defineNuxtPlugin((nuxtApp) => {
$1
})
```
nplugin:vue
Nuxt plugin use vue package
```javascript
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use($1)
})
```
nmiddleware:route
Nuxt route middleware
```javascript
export default defineNuxtRouteMiddleware((to, from) => {
$1
})
```
nmiddleware:server
Nuxt server middleware
```javascript
export default defineEventHandler((event) => {
$1
})
```
napi
Nuxt api route
```javascript
export default defineEventHandler(${1:async }(event) => {
$2
return {
$3
}
})
```
nplugin:server
Nuxt server plugin
```javascript
export default defineNitroPlugin((nitroApp) => {
$1
})
```
nreadBody
Nuxt readBody
```javascript
const ${1:body} = await readBody(event)
```
ngetQuery
Nuxt getQuery
```javascript
const { $1 } = getQuery(event)
```
ngetCookie
Nuxt getCookie
```javascript
getCookie(event, '${1:cookie}')
```
nsetCookie
Nuxt setCookie
```javascript
setCookie(event, '${1:cookie}', ${2:value})
```
### Nuxt (template)
Prefix
Name
Body
nlink
NuxtLink
```html
$3
```
nlink:blank
NuxtLink with target _blank
```html
$4
```
nlink:external
NuxtLink with target external
```html
$5
```
nlink:param
NuxtLink with param
```html
$5
```
nlink:obj
NuxtLink with object
```html
$3
```
nlink:name
NuxtLink with name
```html
$4
```
nlink:path
NuxtLink with path
```html
$4
```
nloading
NuxtLoadingIndicator
```html
```
nlayout
NuxtLayout
```html
$2
```
nlayout:name
NuxtLayout with name
```html
$4
```
npage
NuxtPage
```html
```
npage:static
NuxtPage with static key
```html
```
nclient
ClientOnly
```html
$2
```
nclient:fallbacks
ClientOnly with fallback props
```html
$3
```
nclient:fallback
ClientOnly with fallback template
```html
$0
```
nTeleport
Nuxt Teleport
```html
$0
```
### VueUse (script)
Prefix
Name
Body
vRefAutoReset
VueUse refAutoReset
```javascript
const ${1:name} = refAutoReset('$2', ${3:1000})
```
vwatchArray
VueUse watchArray
```javascript
watchArray(${1:list}, (new${1/(.*)/${1:/capitalize}/}, old${1/(.*)/${1:/capitalize}/}, ${4:added}, ${5:removed}) => {
$0
})
```
vwatchAtMost
VueUse watchAtMost
```javascript
watchAtMost(${1:source}, (${2:val}) => {
$0
}, { max: ${3:3} })
```
vwatchDebounced
VueUse watchDebounced
```javascript
watchDebounced(${1:source}, (${2:val}) => {
$0
}, { debounce: ${3:500}, maxWait: ${4:1000} })
```
vwatchIgnorable
VueUse watchIgnorable
```javascript
const { stop:$3, ignoreUpdates:$4 } = = watchIgnorable(${1:source}, (${2:val}) => {
$0
})
```
vwatchOnce
VueUse watchOnce
```javascript
watchOnce(${1:source}, (${2:val}) => {
$0
})
```
vwatchImmediate
VueUse watchImmediate
```javascript
vwatchImmediate(${1:source}, (${2:val}) => {
$0
})
```
vwatchPausable
VueUse watchPausable
```javascript
const { stop$3, pause$4, resume$5 } = watchPausable(${1:source}, (${2:val}) => {
$0
})
```
vwatchThrottled
VueUse watchThrottled
```javascript
watchThrottled(${1:source}, (${2:val}) => {
$0
}, { throttle: ${3:500} })
```
vwatchTriggerable
VueUse watchTriggerable
```javascript
const { trigger$3, ignoreUpdates$4 } = watchTriggerable(${1:source}, (${2:val}) => {
$0
})
```
vwatchWithFilter
VueUse watchWithFilter
```javascript
watchWithFilter(${1:source}, (${2:val}) => {
$0
}, { eventFilter: $3 })
```
vwhenever
VueUse whenever
```javascript
whenever(${1:source}, (${2:val}) => {
$0
})
```
vuse:vmodel
Implement v-model using useVModel
```javascript
const ${2:value} = useVModel(props, '${1:modelValue}', emit)
```
vuse:vmodels
Implement v-model using useVModels
```javascript
const { ${1:modelValue}$2 } = useVModels(props, emit)
```
vuse:hover
VueUse useElementHover
```javascript
const ${1:elem} = ref<${2|HTMLInputElement,HTMLDivElement,...|} | null>(null)
const ${3:isHovered} = useElementHover($1)
```
vuse:fetch / vuf
VueUse useFetch
```javascript
const { data: ${1:data} } = useFetch('$2'$3)
```
vget
VueUse get
```javascript
get($1)
```
vset
VueUse set
```javascript
set($1, $2)
```
vdef
VueUse isDefined
```javascript
isDefined($1)
```
vuse:toggle / vut
VueUse useToggle
```javascript
const [${1:value}, ${2:toggle}] = useToggle()
```
vuse:toggle:fn / vutt
VueUse useToggle function
```javascript
const toggle${2/(.*)/${1:/capitalize}/} = useToggle($1)
```
vuse:import / vuim
Import from vueuse
```javascript
import { $1 } from '@vueuse/core'
```
### Vue Macros
Prefix
Name
Body
vdefineModels / vmacro:model
Define models
```javascript
const { modelValue$2 } = defineModels<{
modelValue: ${1:string}
}>()
```
vdefinePropsRefs / vmacro:props
Define props refs
```javascript
const { $2 } = definePropsRefs<{
$1
}>()
```
vdefineOptions / vmacro:options
Define options
```javascript
defineOptions({
$0
})
```
vdefineSlots / vmacro:slots
Define slots
```javascript
defineSlots<{
$0
}>()
```
vdefineRender / vmacro:render
Define render
```javascript
defineRender(
$0
)
```
vdefineRender:fn / vmacro:render:fn
Define render function
```javascript
defineRender(() => {
return (
$0
)
})
```
## Running locally
```bash
# ensure Deno is installed
# https://deno.land/[email protected]/getting_started/installation
# generate .code-snippets and documentation
deno task generate
```