README.md

December 1, 2025 · View on GitHub


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

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
v:base Vue SFC 
<script lang="ts" setup>
\$0
</script>

<template>
  \$1
</template>
v:base:full Vue SFC with style | postcss 
<script lang="ts" setup>
\$0
</script>

<template>
  \$1
</template>

<style lang="postcss" scoped>
  
</style>
v:base:full:css Vue SFC with style | css 
<script lang="ts" setup>
\$0
</script>

<template>
  \$1
</template>

<style lang="css" scoped>
  
</style>
v:base:full:scss Vue SFC with style | scss 
<script lang="ts" setup>
\$0
</script>

<template>
  \$1
</template>

<style lang="scss" scoped>
  
</style>
v:base:full:less Vue SFC with style | less 
<script lang="ts" setup>
\$0
</script>

<template>
  \$1
</template>

<style lang="less" scoped>
  
</style>
v:base:script Vue script setup | ts 
<script lang="ts" setup>
\$0
</script>
v:base:template Vue template 
<template>
  \$0
</template>
v:base:style Vue scoped style | postcss 
<style lang="postcss" scoped>
\$0
</style>
v:base:style:lang Vue style with language option 
<style lang="${1|css,postcss,...|}"${2|scoped,|}>
\$0
</style>
v:base:style:css Vue scoped style | css 
<style lang="css" scoped>
\$0
</style>
v:base:style:scss scoped style | scss 
<style lang="scss" scoped>
\$0
</style>
v:base:style:less scoped style | less 
<style lang="less" scoped>
\$0
</style>
v:base:style:module Vue style with CSS modules 
<style module\$1>
\$0
</style>
v:base:style:src Vue scoped style with src 
<style scoped src="\$1">
\$0
</style>

Template

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

Script

Script setup and composables

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

Code snippets

Useful vue snippets and helpers

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

Nuxt (script)

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

Nuxt (template)

Prefix Name Body
v:n:link NuxtLink 
<NuxtLink ${1|to,:to|}="\$2">\$3</NuxtLink>
v:n:link:blank NuxtLink with target _blank 
<NuxtLink ${1|to,:to|}="\$2" target="_blank" \$3>\$4</NuxtLink>
v:n:link:external NuxtLink with target external 
<NuxtLink ${1|to,:to|}="\$2" external target="${3|_blank,_self|}" \$4>\$5</NuxtLink>
v:n:link:param NuxtLink with param 
<NuxtLink :to="`$1${${2:id}}\$3`" \$4>\$5</NuxtLink>
v:n:link:obj NuxtLink with object 
<NuxtLink :to="{ \$1 }" \$2>\$3</NuxtLink>
v:n:link:name NuxtLink with name 
<NuxtLink :to="{ name: '\$1'\$2 }" \$3>\$4</NuxtLink>
v:n:link:path NuxtLink with path 
<NuxtLink :to="{ path: '\$1'\$2 }" \$3>\$4</NuxtLink>
v:n:loading NuxtLoadingIndicator 
<NuxtLoadingIndicator \$1/>
v:n:layout NuxtLayout 
<NuxtLayout \$1>\$2</NuxtLayout>
v:n:layout:name NuxtLayout with name 
<NuxtLayout ${2|name,:name|}="\$3">\$4</NuxtLayout>
v:n:page NuxtPage 
<NuxtPage \$1/>
v:n:page:static NuxtPage with static key 
<NuxtPage page-key="static" \$1/>
v:n:client ClientOnly 
<ClientOnly \$1>\$2</ClientOnly>
v:n:client:fallbacks ClientOnly with fallback props 
<ClientOnly fallback-tag="${1:span}" fallback="${2:Loading...}">\$3</ClientOnly>
v:n:client:fallback ClientOnly with fallback template 
<ClientOnly>
  <template #fallback>
    \$0
  </template>
</ClientOnly>
v:n:Teleport Nuxt Teleport 
<Teleport to="\$1">
  \$0
</Teleport>

Pinia

Prefix Name Body
pstore Setup Pinia store 
import { defineStore } from 'pinia'

export const use${TM_FILENAME_BASE/^(.*)$/${1:/kebabcase}/}Store = defineStore('$TM_FILENAME_BASE', () => {
  \$0
  
  return {
   
  }
})
pstore:options Setup Pinia store (Options) 
import { defineStore } from 'pinia'

export const use${TM_FILENAME_BASE/^(.*)$/${1:/kebabcase}/}Store = defineStore('$TM_FILENAME_BASE', {
 state: () => ({
   \$0
 }),
 getters: {},
 actions: {},
})
vuseStore / vus Use store 
const ${2:\$1Store} = use${1/(.*)/${1:/capitalize}/}Store()

Vue Router (script)

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

Vue Router (template)

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

Javascript

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