Vue and Nuxt Snippets for VSCode

!Visual Studio Marketplace Version
!Visual Studio Marketplace Installs
!GitHub
!Vue Version

Installation

- You can do it by finding Vue & Nuxt Snippets by praburangki in VS Code marketplace and clicking install.
- Or you can follow this link and click install.

Snippet syntax

$3

- $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

$3

- Tabstops with default values → ${1:name}

$3

- Tabstops with multiple values → ${1|one,two,three|}.
- Truncated in documentation, for easier viewing → ${1|one,...|}.

Snippets

$3

.vue files

Prefix	Name	Body
`v:base`	Vue SFC	```html` `
`v:base:full`	Vue SFC with style \| postcss	``html` `
`v:base:full:css`	Vue SFC with style \| css	``html` `
`v:base:full:scss`	Vue SFC with style \| scss	``html` `
`v:base:full:less`	Vue SFC with style \| less	``html` `
`v:base:script`	Vue script setup \| ts	``html` `
`v:base:template`	Vue template	``html` `
`v:base:style`	Vue scoped style \| postcss	``html` `
`v:base:style:lang`	Vue style with language option	``html` `
`v:base:style:css`	Vue scoped style \| css	``html` `
`v:base:style:scss`	scoped style \| scss	``html` `
`v:base:style:less`	scoped style \| less	``html` `
`v:base:style:module`	Vue style with CSS modules	``html` `
`v:base:style:src`	Vue scoped style with src	``html` `

$3

Prefix	Name	Body
`v:slot`	slot	``html $0``
`v:slot:named`	named slot	``html $0``
`v:template:named`	named template	``html``
`v:component`	Vue component	``html $0``
`v:keep-alive`	Vue KeepAlive	``html $0``
`v:teleport`	Vue teleport	``html $0``
`v:transition`	Vue Transition	``html $0``
`v:transition:name`	Vue Transition with name	``html $0``
`v:transition:type`	Vue Transition with type	``html $0``
`v:transition:appear`	Vue Transition with appear	``html $0``
`v:transition-group`	Vue TransitionGroup	``html $0``
`v:suspense`	Vue Suspense	``html $0``
`v:suspense:fallback`	Vue Suspense with fallback	``html $0``
`v:text`	v-text	``html v-text="$1"``
`v:html`	v-html	``html v-html="$1"``
`v:show`	v-show	``html v-show="$1"``
`v:if`	v-if	``html v-if="$1"``
`v:eif`	v-else-if	``html v-else-if="$1"``
`v:else`	v-else	``html v-else``
`v:for`	v-for	``html v-for="${2:item} in ${1:items}" :key="$2$3"``
`v:fori`	v-for (indexed)	``html v-for="(${2:item}, ${3:i}) in ${1:items}" :key="${4:$3}"``
`v:forr`	v-for range	``html v-for="${1:n} in ${2:5}" :key="$1"``
`v:emit`	emit	``html emit('$1'$2)``
`v:emit:pass`	Vue pass emit	``html @${1\|click,input,...\|}="\$emit('${2:$1}', \$event)"``
`v:on`	v-on	``html v-on="${1:emits}"``
`v:on:event`	event handler	``html @$1="$2"``
`v:on:click`	click handler	``html @click="${1:onClick}"``
`v:on:input`	input handler	``html @input="${1:onInput}"``
`v:on:update`	update handler	``html @update="${1:onUpdate}"``
`v:on:change`	change handler	``html @change="${1:onChange}"``
`v:on:blur`	blur handler	``html @blur="${1:onBlur}"``
`v:on:focus`	focus handler	``html @focus="${1:onFocus}"``
`v:on:submit`	submit handler	``html @submit${1:.prevent}="${2:onSubmit}"``
`v:bind`	v-bind	``html v-bind="$1"``
`v:bind:attrs`	v-bind attrs	``html v-bind="\$attrs"``
`v:bind:props`	v-bind props	``html v-bind="\$props"``
`v:bind:full`	v-bind props and attrs	``html v-bind="[\$props, \$attrs]"``
`v:model`	v-model	``html v-model="$1"``
`v:model:number`	v-model.number	``html v-model.number="$1"``
`v:model:trim`	v-model.trim	``html v-model.trim="$1"``
`v:model:custom`	custom v-model	``html v-model:${1:custom}="$2"``
`v:v-slot`	scoped slot	``html v-slot="{$1}"``
`v:pre`	v-pre	``html v-pre="$1"``
`v:once`	v-once	``html v-once``
`v:memo`	v-memo	``html v-memo="[$1]"``
`v:cloak`	v-cloak	``html v-cloak``
`v:key`	Vue key	``html :key="$1"``
`v:ref`	Vue ref	``html ref="$1"``
`v:name`	name property	``html ${1\|name,:name\|}="$2"``
`v:is`	is property	``html ${1\|is,:is\|}="$2"``
`v:b`	bind attribute	``html :${1:prop}="${2:$1}"``
`v:a`	attribute	``html ${1:prop}="$2"``
`v:class`	Vue classes	``html :class="$1"``
`v:class:list`	Vue classes list	``html :class="[$1]"``
`v:class:cond`	Vue conditional classes	``html :class="{ $1: $2 }"``
`v:style`	Vue inline style	``html :style="{ $1: $2 }"``
`v:style:list`	Vue inline style list	``html :style="[$1]"``
`v:v`	Vue	``html {{ $1 }}``
`v:vt`	Vue i18n translation	``html {{ $t('$1') }}``
`v:if:slot`	v-if slot defined	``html v-if="\$slots.${1:default}"``
`v:if:slot-prop`	v-if slot or prop defined	``html v-if="\$slots.${1:label} \|\| ${2:$1}"``
`v:for:template`	v-for in template	``html <${1\|template,div,...\|} v-for="${3:item} in ${2:items}" :key="$3$4"> $0``
`v:fori:template`	v-for (indexed) in template	``html <${1\|template,div,...\|} v-for="(${3:item}, ${4:i}) in ${2:items}" :key="${5:$4}"> $0``
`v:if:template`	v-if in template	``html <${1\|template,div,...\|} v-if="$2"> $0``
`v:tif`	template with v-if	``html``

$3

Script setup and composables

Prefix	Name	Body
`v:ref`	Vue ref	``javascript const ${1:name} = ref($2)``
`v:ref:ts`	Vue ref (typed)	``javascript const ${1:name} = ref<$2>($3)``
`v:computed`	Vue computed	``javascript const ${1:name} = computed(() => $2)``
`v:computed:ts`	Vue computed (typed)	``javascript const ${1:name} = computed<$2>(() => $3)``
`v:computed:gs`	Vue computed (get/set)	``javascript const ${1:name} = computed({ get: () => ${2}, set: (${3:value}: ${4:string}) => { ${5} }, })``
`v:reactive`	Vue reactive	``javascript const ${1:name} = reactive({$2})``
`v:reactive:ts`	Vue reactive (typed)	``javascript const ${1:name}: ${2:type} = reactive({$3})``
`v:shallowRef`	Vue shallowRef	``javascript const ${1:name} = shallowRef($2)``
`v:toRef`	Vue toRef	``javascript toRef(${1:props}, '$2')``
`v:toRefs`	Vue toRefs	``javascript toRefs(${1:props})``
`v:unref`	Vue unref	``javascript unref($1)``
`v:readonly`	Vue readonly	``javascript readonly(${1:object})``
`v:ref:elem`	Vue element ref	``javascript const ${1:elem} = ref<${2\|HTMLInputElement,HTMLInputElement,...\|} \| null>(null)``
`v:watchEffect`	Vue watchEffect	``javascript watchEffect(() => { $0 })``
`v:watch`	Vue watch source	``javascript watch(${1:source}, (${2:val}) => { $0 })``
`v:watch:inline`	Vue watch inline	``javascript watch(${1:source}, ${2:fn})``
`v:watch:getter`	Vue watch getter	``javascript watch( () => ${1:source}, (${2:val}) => { $0 })``
`v:watch:multiple`	Vue watch multiple	``javascript watch( [${1:source1}, ${2:source2}] ([$1, $2]) => { $0 } )``
`v:watch:immediate`	Vue watch immediate	``javascript watch( ${1:source}, (${2:val}) => { $0 }, { immediate: true } )``
`v:watch:deep`	Vue watch deep	``javascript watch( ${1:source}, (${2:val}) => { $0 }, { deep: true } )``
`v:props`	Vue defineProps	``javascript ${1:const props = }defineProps<${2:Props}>()``
`v:props:defaults`	Vue defineProps with defaults	``javascript ${1:const props = }withDefaults(defineProps<${2:Props}>(), { $0 })``
`v:emits`	Vue defineEmits	``javascript ${1:const emit = }defineEmits<{ ${2:click}: [${3:payload}: ${4:string}],$5 }>()``
`v:model`	Vue defineModel	``javascript const ${1:modelValue} = defineModel<${2:string}>($3)``
`v:emit`	Vue emit event	``javascript emit('$1'$2)``
`v:expose`	Vue defineExpose	``javascript defineExpose({ $1 })``
`v:onMounted:async`	Vue onMounted	``javascript onMounted(async () => { $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 })``
`v:provide`	Vue provide	``javascript provide(${1:key}, ${2:value})``
`v:provide:ts`	Vue provide (typed)	``javascript provide<${1:string}>(${2:key}, ${3:value})``
`v:inject`	Vue inject	``javascript const ${1:value} = inject(${2:key})``
`v:inject:ts`	Vue inject (typed)	``javascript const ${1:value} = inject<${2:string}>(${3:key})``
`v:inject:default`	Vue inject with default	``javascript const ${1:value} = inject(${2:key}, ${3:defaultValue})``
`v:inject:key`	Vue injection key	``javascript const ${1:key}: InjectionKey<${3:string}> = Symbol('$2')``
`v:slots`	Vue useSlots	``javascript const slots = useSlots()``
`v:attrs`	Vue useAttrs	``javascript const attrs = useAttrs()``
`v:import`	Import from vue	``javascript import { $1 } from 'vue'``

$3

Useful vue snippets and helpers

Prefix	Name	Body
`v:composable`	Vue define composable	``javascript export function use${1/(.*)/${1:/pascalcase}/}() { $0 return { } }` `
`v:composable:file`	Vue define composable in file	``javascript export function ${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}() { $0 return { } }` `
`v:use`	Use composable	``javascript const ${2:$1} = use${1/(.*)/${1:/capitalize}/}($3)``
`v:used`	Use composable with destructuring	``javascript const { $2 } = use${1/(.*)/${1:/capitalize}/}($3)``
`v:has-slot`	Vue check for slots	``javascript const slots = useSlots() function hasSlot(name: string) { return !!slots[name] }``

$3

Prefix	Name	Body
`v:n:fetch`	Nuxt useFetch	``javascript const { data: ${1:data} } = await useFetch('$2'$3)``
`v:n:fetch:cb`	Nuxt useFetch with callback	``javascript const { data: ${1:data} } = await useFetch(() => '$2'$3)``
`v:n:fetch:lazy`	Nuxt useLazyFetch	``javascript const { pending, data: ${1:data} } = useLazyFetch('$2'$3)``
`v:n:fetch:lazy:cb`	Nuxt useLazyFetch callback	``javascript const { pending, data: ${1:data} } = useLazyFetch(() => '$2'$3)``
`v:n:fetch:post`	Nuxt useFetch POST	``javascript const { data: ${1:data} } = await useFetch('$2', { method: 'POST', body: ${3:body},$4 })``
`v:n:asyncdata`	Nuxt useAsyncData	``javascript const { data: ${1:data} } = await useAsyncData('${2:key}', () => $fetch('$3')$4)``
`v:n:asyncdata:lazy`	Nuxt useLazyAsyncData	``javascript const { pending, data: ${1:data} } = useLazyAsyncData('${2:key}', () => $fetch('$3')$4)``
`v:n:app`	Nuxt useNuxtApp	``javascript const app = useNuxtApp()``
`v:n:appConfig`	Nuxt useAppConfig	``javascript const appConfig = useAppConfig()``
`v:n:runtimeConfig`	Nuxt useRuntimeConfig	``javascript const config = useRuntimeConfig()``
`v:n:cookie`	Nuxt useCookie	``javascript const ${1:cookie} = useCookie('${2:$1}'$3)``
`v:n:cookie:opts`	Nuxt useCookie with options	``javascript const ${1:cookie} = useCookie('${2:$1}', { $3 })``
`v:n:data`	Nuxt useNuxtData	``javascript const { data: ${2:$1} } = useNuxtData('${1:key}')``
`v:n:error`	Nuxt useError	``javascript const ${1:error} = useError()``
`v:n:state`	Nuxt useState	``javascript const ${1:state} = useState('${2:$1}'$3)``
`v:n:state:init`	Nuxt useState (init)	``javascript const ${1:state} = useState('${2:$1}', () => $3)``
`v:n:head`	Nuxt useHead	``javascript useHead({ $1 })``
`v:n:head:title`	Nuxt useHead title	``javascript useHead({ title: $1,$0 })``
`v:n:pageMeta`	Nuxt definePageMeta	``javascript definePageMeta({ $1 })``
`v:n:pageMeta:title`	Nuxt definePageMeta title	``javascript definePageMeta({ title: '$1',$0 })``
`v:n:pageMeta:layout`	Nuxt definePageMeta layout	``javascript definePageMeta({ layout: '$1',$0 })``
`v:n:pageMeta:middleware`	Nuxt definePageMeta middleware	``javascript definePageMeta({ middleware: ['$1'$2],$0 })``
`v:n:to`	Nuxt navigateTo	``javascript navigateTo('$1'$2)``
`v:n:to:obj`	Nuxt navigateTo object	``javascript navigateTo({ $1 }$2)``
`v:n:to:replace`	Nuxt navigateTo replace	``javascript navigateTo('$1', { replace: true })``
`v:n:to:external`	Nuxt navigateTo external	``javascript navigateTo('$1', { external: true })``
`v:n:to:redirect`	Nuxt navigateTo redirect	``javascript navigateTo('$1', { redirectCode: ${2\|301,302,...\|} })``
`v:n:to:name`	Nuxt navigateTo name	``javascript navigateTo({ name: '$1',$0 })``
`v:n:to:path`	Nuxt navigateTo path	``javascript navigateTo({ path: '$1',$0 })``
`v:n:plugin`	Nuxt plugin	``javascript export default defineNuxtPlugin((nuxtApp) => { $1 })``
`v:n:plugin:vue`	Nuxt plugin use vue package	``javascript export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use($1) })``
`v:n:middleware:route`	Nuxt route middleware	``javascript export default defineNuxtRouteMiddleware((to, from) => { $1 })``
`v:n:middleware:server`	Nuxt server middleware	``javascript export default defineEventHandler((event) => { $1 })``
`v:n:api`	Nuxt api route	``javascript export default defineEventHandler(${1:async }(event) => { $2 return { $3 } })``
`v:n:plugin:server`	Nuxt server plugin	``javascript export default defineNitroPlugin((nitroApp) => { $1 })``
`v:n:readBody`	Nuxt readBody	``javascript const ${1:body} = await readBody(event)``
`v:n:getQuery`	Nuxt getQuery	``javascript const { $1 } = getQuery(event)``
`v:n:getCookie`	Nuxt getCookie	``javascript getCookie(event, '${1:cookie}')``
`v:n:setCookie`	Nuxt setCookie	``javascript setCookie(event, '${1:cookie}', ${2:value})``

$3

Prefix	Name	Body
`v:n:link`	NuxtLink	``html $3``
`v:n:link:blank`	NuxtLink with target _blank	``html $4``
`v:n:link:external`	NuxtLink with target external	``html $5``
`v:n:link:param`	NuxtLink with param	``html " $4>$5``
`v:n:link:obj`	NuxtLink with object	``html $3``
`v:n:link:name`	NuxtLink with name	``html $4``
`v:n:link:path`	NuxtLink with path	``html $4``
`v:n:loading`	NuxtLoadingIndicator	``html``
`v:n:layout`	NuxtLayout	``html $2``
`v:n:layout:name`	NuxtLayout with name	``html $4``
`v:n:page`	NuxtPage	``html``
`v:n:page:static`	NuxtPage with static key	``html``
`v:n:client`	ClientOnly	``html $2``
`v:n:client:fallbacks`	ClientOnly with fallback props	``html $3``
`v:n:client:fallback`	ClientOnly with fallback template	``html``
`v:n:Teleport`	Nuxt Teleport	``html $0``

$3

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()``

$3

Prefix	Name	Body
`v:router`	Vue router	``javascript const ${1:router} = useRouter()``
`v:route`	Vue route	``javascript const ${1:route} = useRoute()``
`v:router:create`	Create Vue router	``javascript const router = createRouter({ history: createWebHashHistory(), routes: ${1:routes}, scrollBehavior(to, from, savedPosition) { $2 } })``

$3

Prefix	Name	Body
`v:to`	Vue Router to	``html ${1\|to,:to\|}="$2"``
`v:to:param`	Vue Router :to with param	``html :to="`$1${${2:id}}$3`"``
`v:to:obj`	Vue Router :to object	``html :to="{ $1 }"``
`v:to:name`	Vue Router :to name	``html :to="{ name: '$1',$2 }"``
`v:to:path`	Vue Router :to path	``html :to="{ path: '$1',$2 }"``
`v:view`	RouterView	``html $0``
`v:link`	RouterLink	``html $3``
`v:link:param`	RouterLink with param	``html ">$4``
`v:link:obj`	RouterLink with object	``html $2``
`v:link:name`	RouterLink with name	``html $3``
`v:link:path`	RouterLink with path	``html $3``

$3

Prefix	Name	Body
`imp`	import	``javascript import ${2:moduleName} from '${1:module}';$0``
`imn`	importNoModuleName	``javascript import '${1:module}';$0``
`imd`	importDestructing	``javascript import { $2 } from '${1:module}';$0``
`ime`	importEverything	``javascript import * as ${2:alias} from '${1:module}';$0``
`ima`	importAs	``javascript import { ${2:originalName} as ${3:alias} } from '${1:module}';$0``
`rqr`	require	``javascript require('${1:package}');``
`req`	requireToConst	``javascript const ${1:packageName} = require('${1:package}');$0``
`mde`	moduleExports	``javascript module.exports = { $0 };` `
`arr:methods`	array methods	``javascript ${1:array}.${2\|map,filter,...\|}((${3:element}) => { $0 });```

Vue and Nuxt Snippets for VSCode

!Visual Studio Marketplace Version
!Visual Studio Marketplace Installs
!GitHub
!Vue Version

Installation

- You can do it by finding Vue & Nuxt Snippets by praburangki in VS Code marketplace and clicking install.
- Or you can follow this link and click install.

Snippet syntax

$3

- Tabstops with default values → ${1:name}

$3

- Tabstops with multiple values → ${1|one,two,three|}.
- Truncated in documentation, for easier viewing → ${1|one,...|}.

Snippets

$3

.vue files

Prefix	Name	Body
`v:base`	Vue SFC	```html` `
`v:base:full`	Vue SFC with style \| postcss	``html` `
`v:base:full:css`	Vue SFC with style \| css	``html` `
`v:base:full:scss`	Vue SFC with style \| scss	``html` `
`v:base:full:less`	Vue SFC with style \| less	``html` `
`v:base:script`	Vue script setup \| ts	``html` `
`v:base:template`	Vue template	``html` `
`v:base:style`	Vue scoped style \| postcss	``html` `
`v:base:style:lang`	Vue style with language option	``html` `
`v:base:style:css`	Vue scoped style \| css	``html` `
`v:base:style:scss`	scoped style \| scss	``html` `
`v:base:style:less`	scoped style \| less	``html` `
`v:base:style:module`	Vue style with CSS modules	``html` `
`v:base:style:src`	Vue scoped style with src	``html` `

$3

Prefix	Name	Body
`v:slot`	slot	``html $0``
`v:slot:named`	named slot	``html $0``
`v:template:named`	named template	``html``
`v:component`	Vue component	``html $0``
`v:keep-alive`	Vue KeepAlive	``html $0``
`v:teleport`	Vue teleport	``html $0``
`v:transition`	Vue Transition	``html $0``
`v:transition:name`	Vue Transition with name	``html $0``
`v:transition:type`	Vue Transition with type	``html $0``
`v:transition:appear`	Vue Transition with appear	``html $0``
`v:transition-group`	Vue TransitionGroup	``html $0``
`v:suspense`	Vue Suspense	``html $0``
`v:suspense:fallback`	Vue Suspense with fallback	``html $0``
`v:text`	v-text	``html v-text="$1"``
`v:html`	v-html	``html v-html="$1"``
`v:show`	v-show	``html v-show="$1"``
`v:if`	v-if	``html v-if="$1"``
`v:eif`	v-else-if	``html v-else-if="$1"``
`v:else`	v-else	``html v-else``
`v:for`	v-for	``html v-for="${2:item} in ${1:items}" :key="$2$3"``
`v:fori`	v-for (indexed)	``html v-for="(${2:item}, ${3:i}) in ${1:items}" :key="${4:$3}"``
`v:forr`	v-for range	``html v-for="${1:n} in ${2:5}" :key="$1"``
`v:emit`	emit	``html emit('$1'$2)``
`v:emit:pass`	Vue pass emit	``html @${1\|click,input,...\|}="\$emit('${2:$1}', \$event)"``
`v:on`	v-on	``html v-on="${1:emits}"``
`v:on:event`	event handler	``html @$1="$2"``
`v:on:click`	click handler	``html @click="${1:onClick}"``
`v:on:input`	input handler	``html @input="${1:onInput}"``
`v:on:update`	update handler	``html @update="${1:onUpdate}"``
`v:on:change`	change handler	``html @change="${1:onChange}"``
`v:on:blur`	blur handler	``html @blur="${1:onBlur}"``
`v:on:focus`	focus handler	``html @focus="${1:onFocus}"``
`v:on:submit`	submit handler	``html @submit${1:.prevent}="${2:onSubmit}"``
`v:bind`	v-bind	``html v-bind="$1"``
`v:bind:attrs`	v-bind attrs	``html v-bind="\$attrs"``
`v:bind:props`	v-bind props	``html v-bind="\$props"``
`v:bind:full`	v-bind props and attrs	``html v-bind="[\$props, \$attrs]"``
`v:model`	v-model	``html v-model="$1"``
`v:model:number`	v-model.number	``html v-model.number="$1"``
`v:model:trim`	v-model.trim	``html v-model.trim="$1"``
`v:model:custom`	custom v-model	``html v-model:${1:custom}="$2"``
`v:v-slot`	scoped slot	``html v-slot="{$1}"``
`v:pre`	v-pre	``html v-pre="$1"``
`v:once`	v-once	``html v-once``
`v:memo`	v-memo	``html v-memo="[$1]"``
`v:cloak`	v-cloak	``html v-cloak``
`v:key`	Vue key	``html :key="$1"``
`v:ref`	Vue ref	``html ref="$1"``
`v:name`	name property	``html ${1\|name,:name\|}="$2"``
`v:is`	is property	``html ${1\|is,:is\|}="$2"``
`v:b`	bind attribute	``html :${1:prop}="${2:$1}"``
`v:a`	attribute	``html ${1:prop}="$2"``
`v:class`	Vue classes	``html :class="$1"``
`v:class:list`	Vue classes list	``html :class="[$1]"``
`v:class:cond`	Vue conditional classes	``html :class="{ $1: $2 }"``
`v:style`	Vue inline style	``html :style="{ $1: $2 }"``
`v:style:list`	Vue inline style list	``html :style="[$1]"``
`v:v`	Vue	``html {{ $1 }}``
`v:vt`	Vue i18n translation	``html {{ $t('$1') }}``
`v:if:slot`	v-if slot defined	``html v-if="\$slots.${1:default}"``
`v:if:slot-prop`	v-if slot or prop defined	``html v-if="\$slots.${1:label} \|\| ${2:$1}"``
`v:for:template`	v-for in template	``html <${1\|template,div,...\|} v-for="${3:item} in ${2:items}" :key="$3$4"> $0``
`v:fori:template`	v-for (indexed) in template	``html <${1\|template,div,...\|} v-for="(${3:item}, ${4:i}) in ${2:items}" :key="${5:$4}"> $0``
`v:if:template`	v-if in template	``html <${1\|template,div,...\|} v-if="$2"> $0``
`v:tif`	template with v-if	``html``

$3

Script setup and composables

Prefix	Name	Body
`v:ref`	Vue ref	``javascript const ${1:name} = ref($2)``
`v:ref:ts`	Vue ref (typed)	``javascript const ${1:name} = ref<$2>($3)``
`v:computed`	Vue computed	``javascript const ${1:name} = computed(() => $2)``
`v:computed:ts`	Vue computed (typed)	``javascript const ${1:name} = computed<$2>(() => $3)``
`v:computed:gs`	Vue computed (get/set)	``javascript const ${1:name} = computed({ get: () => ${2}, set: (${3:value}: ${4:string}) => { ${5} }, })``
`v:reactive`	Vue reactive	``javascript const ${1:name} = reactive({$2})``
`v:reactive:ts`	Vue reactive (typed)	``javascript const ${1:name}: ${2:type} = reactive({$3})``
`v:shallowRef`	Vue shallowRef	``javascript const ${1:name} = shallowRef($2)``
`v:toRef`	Vue toRef	``javascript toRef(${1:props}, '$2')``
`v:toRefs`	Vue toRefs	``javascript toRefs(${1:props})``
`v:unref`	Vue unref	``javascript unref($1)``
`v:readonly`	Vue readonly	``javascript readonly(${1:object})``
`v:ref:elem`	Vue element ref	``javascript const ${1:elem} = ref<${2\|HTMLInputElement,HTMLInputElement,...\|} \| null>(null)``
`v:watchEffect`	Vue watchEffect	``javascript watchEffect(() => { $0 })``
`v:watch`	Vue watch source	``javascript watch(${1:source}, (${2:val}) => { $0 })``
`v:watch:inline`	Vue watch inline	``javascript watch(${1:source}, ${2:fn})``
`v:watch:getter`	Vue watch getter	``javascript watch( () => ${1:source}, (${2:val}) => { $0 })``
`v:watch:multiple`	Vue watch multiple	``javascript watch( [${1:source1}, ${2:source2}] ([$1, $2]) => { $0 } )``
`v:watch:immediate`	Vue watch immediate	``javascript watch( ${1:source}, (${2:val}) => { $0 }, { immediate: true } )``
`v:watch:deep`	Vue watch deep	``javascript watch( ${1:source}, (${2:val}) => { $0 }, { deep: true } )``
`v:props`	Vue defineProps	``javascript ${1:const props = }defineProps<${2:Props}>()``
`v:props:defaults`	Vue defineProps with defaults	``javascript ${1:const props = }withDefaults(defineProps<${2:Props}>(), { $0 })``
`v:emits`	Vue defineEmits	``javascript ${1:const emit = }defineEmits<{ ${2:click}: [${3:payload}: ${4:string}],$5 }>()``
`v:model`	Vue defineModel	``javascript const ${1:modelValue} = defineModel<${2:string}>($3)``
`v:emit`	Vue emit event	``javascript emit('$1'$2)``
`v:expose`	Vue defineExpose	``javascript defineExpose({ $1 })``
`v:onMounted:async`	Vue onMounted	``javascript onMounted(async () => { $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 })``
`v:provide`	Vue provide	``javascript provide(${1:key}, ${2:value})``
`v:provide:ts`	Vue provide (typed)	``javascript provide<${1:string}>(${2:key}, ${3:value})``
`v:inject`	Vue inject	``javascript const ${1:value} = inject(${2:key})``
`v:inject:ts`	Vue inject (typed)	``javascript const ${1:value} = inject<${2:string}>(${3:key})``
`v:inject:default`	Vue inject with default	``javascript const ${1:value} = inject(${2:key}, ${3:defaultValue})``
`v:inject:key`	Vue injection key	``javascript const ${1:key}: InjectionKey<${3:string}> = Symbol('$2')``
`v:slots`	Vue useSlots	``javascript const slots = useSlots()``
`v:attrs`	Vue useAttrs	``javascript const attrs = useAttrs()``
`v:import`	Import from vue	``javascript import { $1 } from 'vue'``

$3

Useful vue snippets and helpers

Prefix	Name	Body
`v:composable`	Vue define composable	``javascript export function use${1/(.*)/${1:/pascalcase}/}() { $0 return { } }` `
`v:composable:file`	Vue define composable in file	``javascript export function ${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}() { $0 return { } }` `
`v:use`	Use composable	``javascript const ${2:$1} = use${1/(.*)/${1:/capitalize}/}($3)``
`v:used`	Use composable with destructuring	``javascript const { $2 } = use${1/(.*)/${1:/capitalize}/}($3)``
`v:has-slot`	Vue check for slots	``javascript const slots = useSlots() function hasSlot(name: string) { return !!slots[name] }``

$3

Prefix	Name	Body
`v:n:fetch`	Nuxt useFetch	``javascript const { data: ${1:data} } = await useFetch('$2'$3)``
`v:n:fetch:cb`	Nuxt useFetch with callback	``javascript const { data: ${1:data} } = await useFetch(() => '$2'$3)``
`v:n:fetch:lazy`	Nuxt useLazyFetch	``javascript const { pending, data: ${1:data} } = useLazyFetch('$2'$3)``
`v:n:fetch:lazy:cb`	Nuxt useLazyFetch callback	``javascript const { pending, data: ${1:data} } = useLazyFetch(() => '$2'$3)``
`v:n:fetch:post`	Nuxt useFetch POST	``javascript const { data: ${1:data} } = await useFetch('$2', { method: 'POST', body: ${3:body},$4 })``
`v:n:asyncdata`	Nuxt useAsyncData	``javascript const { data: ${1:data} } = await useAsyncData('${2:key}', () => $fetch('$3')$4)``
`v:n:asyncdata:lazy`	Nuxt useLazyAsyncData	``javascript const { pending, data: ${1:data} } = useLazyAsyncData('${2:key}', () => $fetch('$3')$4)``
`v:n:app`	Nuxt useNuxtApp	``javascript const app = useNuxtApp()``
`v:n:appConfig`	Nuxt useAppConfig	``javascript const appConfig = useAppConfig()``
`v:n:runtimeConfig`	Nuxt useRuntimeConfig	``javascript const config = useRuntimeConfig()``
`v:n:cookie`	Nuxt useCookie	``javascript const ${1:cookie} = useCookie('${2:$1}'$3)``
`v:n:cookie:opts`	Nuxt useCookie with options	``javascript const ${1:cookie} = useCookie('${2:$1}', { $3 })``
`v:n:data`	Nuxt useNuxtData	``javascript const { data: ${2:$1} } = useNuxtData('${1:key}')``
`v:n:error`	Nuxt useError	``javascript const ${1:error} = useError()``
`v:n:state`	Nuxt useState	``javascript const ${1:state} = useState('${2:$1}'$3)``
`v:n:state:init`	Nuxt useState (init)	``javascript const ${1:state} = useState('${2:$1}', () => $3)``
`v:n:head`	Nuxt useHead	``javascript useHead({ $1 })``
`v:n:head:title`	Nuxt useHead title	``javascript useHead({ title: $1,$0 })``
`v:n:pageMeta`	Nuxt definePageMeta	``javascript definePageMeta({ $1 })``
`v:n:pageMeta:title`	Nuxt definePageMeta title	``javascript definePageMeta({ title: '$1',$0 })``
`v:n:pageMeta:layout`	Nuxt definePageMeta layout	``javascript definePageMeta({ layout: '$1',$0 })``
`v:n:pageMeta:middleware`	Nuxt definePageMeta middleware	``javascript definePageMeta({ middleware: ['$1'$2],$0 })``
`v:n:to`	Nuxt navigateTo	``javascript navigateTo('$1'$2)``
`v:n:to:obj`	Nuxt navigateTo object	``javascript navigateTo({ $1 }$2)``
`v:n:to:replace`	Nuxt navigateTo replace	``javascript navigateTo('$1', { replace: true })``
`v:n:to:external`	Nuxt navigateTo external	``javascript navigateTo('$1', { external: true })``
`v:n:to:redirect`	Nuxt navigateTo redirect	``javascript navigateTo('$1', { redirectCode: ${2\|301,302,...\|} })``
`v:n:to:name`	Nuxt navigateTo name	``javascript navigateTo({ name: '$1',$0 })``
`v:n:to:path`	Nuxt navigateTo path	``javascript navigateTo({ path: '$1',$0 })``
`v:n:plugin`	Nuxt plugin	``javascript export default defineNuxtPlugin((nuxtApp) => { $1 })``
`v:n:plugin:vue`	Nuxt plugin use vue package	``javascript export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use($1) })``
`v:n:middleware:route`	Nuxt route middleware	``javascript export default defineNuxtRouteMiddleware((to, from) => { $1 })``
`v:n:middleware:server`	Nuxt server middleware	``javascript export default defineEventHandler((event) => { $1 })``
`v:n:api`	Nuxt api route	``javascript export default defineEventHandler(${1:async }(event) => { $2 return { $3 } })``
`v:n:plugin:server`	Nuxt server plugin	``javascript export default defineNitroPlugin((nitroApp) => { $1 })``
`v:n:readBody`	Nuxt readBody	``javascript const ${1:body} = await readBody(event)``
`v:n:getQuery`	Nuxt getQuery	``javascript const { $1 } = getQuery(event)``
`v:n:getCookie`	Nuxt getCookie	``javascript getCookie(event, '${1:cookie}')``
`v:n:setCookie`	Nuxt setCookie	``javascript setCookie(event, '${1:cookie}', ${2:value})``

$3

Prefix	Name	Body
`v:n:link`	NuxtLink	``html $3``
`v:n:link:blank`	NuxtLink with target _blank	``html $4``
`v:n:link:external`	NuxtLink with target external	``html $5``
`v:n:link:param`	NuxtLink with param	``html " $4>$5``
`v:n:link:obj`	NuxtLink with object	``html $3``
`v:n:link:name`	NuxtLink with name	``html $4``
`v:n:link:path`	NuxtLink with path	``html $4``
`v:n:loading`	NuxtLoadingIndicator	``html``
`v:n:layout`	NuxtLayout	``html $2``
`v:n:layout:name`	NuxtLayout with name	``html $4``
`v:n:page`	NuxtPage	``html``
`v:n:page:static`	NuxtPage with static key	``html``
`v:n:client`	ClientOnly	``html $2``
`v:n:client:fallbacks`	ClientOnly with fallback props	``html $3``
`v:n:client:fallback`	ClientOnly with fallback template	``html``
`v:n:Teleport`	Nuxt Teleport	``html $0``

$3

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()``

$3

Prefix	Name	Body
`v:router`	Vue router	``javascript const ${1:router} = useRouter()``
`v:route`	Vue route	``javascript const ${1:route} = useRoute()``
`v:router:create`	Create Vue router	``javascript const router = createRouter({ history: createWebHashHistory(), routes: ${1:routes}, scrollBehavior(to, from, savedPosition) { $2 } })``

$3

Prefix	Name	Body
`v:to`	Vue Router to	``html ${1\|to,:to\|}="$2"``
`v:to:param`	Vue Router :to with param	``html :to="`$1${${2:id}}$3`"``
`v:to:obj`	Vue Router :to object	``html :to="{ $1 }"``
`v:to:name`	Vue Router :to name	``html :to="{ name: '$1',$2 }"``
`v:to:path`	Vue Router :to path	``html :to="{ path: '$1',$2 }"``
`v:view`	RouterView	``html $0``
`v:link`	RouterLink	``html $3``
`v:link:param`	RouterLink with param	``html ">$4``
`v:link:obj`	RouterLink with object	``html $2``
`v:link:name`	RouterLink with name	``html $3``
`v:link:path`	RouterLink with path	``html $3``

$3

Prefix	Name	Body
`imp`	import	``javascript import ${2:moduleName} from '${1:module}';$0``
`imn`	importNoModuleName	``javascript import '${1:module}';$0``
`imd`	importDestructing	``javascript import { $2 } from '${1:module}';$0``
`ime`	importEverything	``javascript import * as ${2:alias} from '${1:module}';$0``
`ima`	importAs	``javascript import { ${2:originalName} as ${3:alias} } from '${1:module}';$0``
`rqr`	require	``javascript require('${1:package}');``
`req`	requireToConst	``javascript const ${1:packageName} = require('${1:package}');$0``
`mde`	moduleExports	``javascript module.exports = { $0 };` `
`arr:methods`	array methods	``javascript ${1:array}.${2\|map,filter,...\|}((${3:element}) => { $0 });```

nuxt-snippets

Vue and Nuxt Snippets for VSCode

Installation

Snippet syntax

$3

$3

$3

Snippets

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

nuxt-snippets

Vue and Nuxt Snippets for VSCode

Installation

Snippet syntax

$3

$3

$3

Snippets

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3