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

<script lang="ts" setup>
$0
</script>

<template>
  $1
</template>

<script lang="ts" setup>
$0
</script>

<template>
  $1
</template>

<style lang="postcss" scoped>
  
</style>

<script lang="ts" setup>
$0
</script>

<template>
  $1
</template>

<style lang="css" scoped>
  
</style>

<script lang="ts" setup>
$0
</script>

<template>
  $1
</template>

<style lang="scss" scoped>
  
</style>

<script lang="ts" setup>
$0
</script>

<template>
  $1
</template>

<style lang="less" scoped>
  
</style>

<script lang="ts" setup>
$0
</script>

<template>
  $0
</template>

<style lang="postcss" scoped>
$0
</style>

<style lang="${1|css,postcss,...|}"${2|scoped,|}>
$0
</style>

<style lang="css" scoped>
$0
</style>

<style lang="scss" scoped>
$0
</style>

<style lang="less" scoped>
$0
</style>

<style module$1>
$0
</style>

<style scoped src="$1">
$0
</style>

Template

<slot$1>$0</slot>

<slot name="${1:default}">
  $0
</slot>

<template #${1:default}>
  $0
</template>

<component :is="$1">$0</component>

<keep-alive $1>
  $0
</keep-alive>

<teleport to="$1">
  $0
</teleport>

<transition $1>
  $0
</transition>

<transition name="$1" $2>
  $0
</transition>

<transition type="${1|transition,animation|}" $2>
  $0
</transition>

<transition appear $1>
  $0
</transition>

<transition-group name="$1" as="${2|ul,div,...|}" $3>
  $0
</transition-group>

<suspense>
  $0
</suspense>

<suspense>
  $0
  <template #fallback>
    $1
  </template>
</suspense>

v-text="$1"

v-html="$1"

v-show="$1"

v-if="$1"

v-else-if="$1"

v-else

v-for="${2:item} in ${1:items}" :key="$2$3"

v-for="(${2:item}, ${3:i}) in ${1:items}" :key="${4:$3}"

v-for="${1:n} in ${2:5}" :key="$1"

emit('$1'$2)

@${1|click,input,...|}="\$emit('${2:$1}', \$event)"

v-on="${1:emits}"

@$1="$2"

@click="${1:onClick}"

@input="${1:onInput}"

@update="${1:onUpdate}"

@change="${1:onChange}"

@blur="${1:onBlur}"

@focus="${1:onFocus}"

@submit${1:.prevent}="${2:onSubmit}"

v-bind="$1"

v-bind="\$attrs"

v-bind="\$props"

v-bind="[\$props, \$attrs]"

v-model="$1"

v-model.number="$1"

v-model.trim="$1"

v-model:${1:custom}="$2"

v-slot="{$1}"

v-pre="$1"

v-once

v-memo="[$1]"

v-cloak

:key="$1"

ref="$1"

${1|name,:name|}="$2"

${1|is,:is|}="$2"

:${1:prop}="${2:$1}"

${1:prop}="$2"

:class="$1"

:class="[$1]"

:class="{ $1: $2 }"

:style="{ $1: $2 }"

:style="[$1]"

{{ $1 }}

{{ $t('$1') }}

v-if="\$slots.${1:default}"

v-if="\$slots.${1:label} || ${2:$1}"

<${1|template,div,...|} v-for="${3:item} in ${2:items}" :key="$3$4">
  $0
</$1>

<${1|template,div,...|} v-for="(${3:item}, ${4:i}) in ${2:items}" :key="${5:$4}">
  $0
</$1>

<${1|template,div,...|} v-if="$2">
  $0
</$1>

<template v-if="$2">
  $0
</template>

Script

Script setup and composables

const ${1:name} = ref($2)

const ${1:name} = ref<$2>($3)

const ${1:name} = computed(() => $2)

const ${1:name} = computed<$2>(() => $3)

const ${1:name} = computed({
  get: () => ${2},
  set: (${3:value}: ${4:string}) => {
    ${5}
  },
})

const ${1:name} = reactive({$2})

const ${1:name}: ${2:type} = reactive({$3})

const ${1:name} = shallowRef($2)

toRef(${1:props}, '$2')

toRefs(${1:props})

unref($1)

readonly(${1:object})

const ${1:elem} = ref<${2|HTMLInputElement,HTMLInputElement,...|} | null>(null)

watchEffect(() => {
  $0
})

watch(${1:source}, (${2:val}) => {
  $0
})

watch(${1:source}, ${2:fn})

watch(
  () => ${1:source},
  (${2:val}) => {
    $0
})

watch(
  [${1:source1}, ${2:source2}]
  ([$1, $2]) => {
    $0
  }
)

watch(
  ${1:source},
  (${2:val}) => {
    $0
  },
  { immediate: true }
)

watch(
  ${1:source},
  (${2:val}) => {
    $0
  },
  { deep: true }
)

${1:const props = }defineProps<${2:Props}>()

${1:const props = }withDefaults(defineProps<${2:Props}>(), {
  $0
})

${1:const emit = }defineEmits<{
  ${2:click}: [${3:payload}: ${4:string}],$5
}>()

const ${1:modelValue} = defineModel<${2:string}>($3)

emit('$1'$2)

defineExpose({
  $1
})

onMounted(async () => {
  $0
})

onBeforeMount(() => {
  $0
})

onUnmounted(() => {
  $0
})

onBeforeUnmount(() => {
  $0
})

onUpdated(() => {
  $0
})

onBeforeUpdate(() => {
  $0
})

onErrorCaptured(() => {
  $0
})

onActivated(() => {
  $0
})

onDeactivated(() => {
  $0
})

provide(${1:key}, ${2:value})

provide<${1:string}>(${2:key}, ${3:value})

const ${1:value} = inject(${2:key})

const ${1:value} = inject<${2:string}>(${3:key})

const ${1:value}  = inject(${2:key}, ${3:defaultValue})

const ${1:key}: InjectionKey<${3:string}> = Symbol('$2')

const slots = useSlots()

const attrs = useAttrs()

import { $1 } from 'vue'

Code snippets

Useful vue snippets and helpers

export function use${1/(.*)/${1:/pascalcase}/}() {
  $0
  
  return {
    
  }
}

export function ${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}() {
  $0
  
  return {
    
  }
}

const ${2:$1} = use${1/(.*)/${1:/capitalize}/}($3)

const { $2 } = use${1/(.*)/${1:/capitalize}/}($3)

const slots = useSlots()
function hasSlot(name: string) {
  return !!slots[name]
}

Nuxt (script)

const { data: ${1:data} } = await useFetch('$2'$3)

const { data: ${1:data} } = await useFetch(() => '$2'$3)

const { pending, data: ${1:data} } = useLazyFetch('$2'$3)

const { pending, data: ${1:data} } = useLazyFetch(() => '$2'$3)

const { data: ${1:data} } = await useFetch('$2', {
  method: 'POST',
  body: ${3:body},$4
})

const { data: ${1:data} } = await useAsyncData('${2:key}', () => $fetch('$3')$4)

const { pending, data: ${1:data} } = useLazyAsyncData('${2:key}', () => $fetch('$3')$4)

const app = useNuxtApp()

const appConfig = useAppConfig()

const config = useRuntimeConfig()

const ${1:cookie} = useCookie('${2:$1}'$3)

const ${1:cookie} = useCookie('${2:$1}', { $3 })

const { data: ${2:$1} } = useNuxtData('${1:key}')

const ${1:error} = useError()

const ${1:state} = useState('${2:$1}'$3)

const ${1:state} = useState('${2:$1}', () => $3)

useHead({
  $1
})

useHead({
  title: $1,$0
})

definePageMeta({
  $1
})

definePageMeta({
  title: '$1',$0
})

definePageMeta({
  layout: '$1',$0
})

definePageMeta({
  middleware: ['$1'$2],$0
})

navigateTo('$1'$2)

navigateTo({ $1 }$2)

navigateTo('$1', { replace: true })

navigateTo('$1', { external: true })

navigateTo('$1', { redirectCode: ${2|301,302,...|} })

navigateTo({
  name: '$1',$0
})

navigateTo({
  path: '$1',$0
})

export default defineNuxtPlugin((nuxtApp) => {
  $1
})

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use($1)
})

export default defineNuxtRouteMiddleware((to, from) => {
  $1
})

export default defineEventHandler((event) => {
  $1
})

export default defineEventHandler(${1:async }(event) => {
  $2
  
  return {
    $3
  }
})

export default defineNitroPlugin((nitroApp) => {
  $1
})

const ${1:body} = await readBody(event)

const { $1 } = getQuery(event)

getCookie(event, '${1:cookie}')

setCookie(event, '${1:cookie}', ${2:value})

Nuxt (template)

<NuxtLink ${1|to,:to|}="$2">$3</NuxtLink>

<NuxtLink ${1|to,:to|}="$2" target="_blank" $3>$4</NuxtLink>

<NuxtLink ${1|to,:to|}="$2" external target="${3|_blank,_self|}" $4>$5</NuxtLink>

<NuxtLink :to="`$1${${2:id}}$3`" $4>$5</NuxtLink>

<NuxtLink :to="{ $1 }" $2>$3</NuxtLink>

<NuxtLink :to="{ name: '$1'$2 }" $3>$4</NuxtLink>

<NuxtLink :to="{ path: '$1'$2 }" $3>$4</NuxtLink>

<NuxtLoadingIndicator $1/>

<NuxtLayout $1>$2</NuxtLayout>

<NuxtLayout ${2|name,:name|}="$3">$4</NuxtLayout>

<NuxtPage $1/>

<NuxtPage page-key="static" $1/>

<ClientOnly $1>$2</ClientOnly>

<ClientOnly fallback-tag="${1:span}" fallback="${2:Loading...}">$3</ClientOnly>

<ClientOnly>
  <template #fallback>
    $0
  </template>
</ClientOnly>

<Teleport to="$1">
  $0
</Teleport>

Pinia

import { defineStore } from 'pinia'

export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', () => {
  $0
  
  return {
   
  }
})

import { defineStore } from 'pinia'

export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', {
 state: () => ({
   $0
 }),
 getters: {},
 actions: {},
})

const ${2:$1Store} = use${1/(.*)/${1:/capitalize}/}Store()

Vue Router (script)

const ${1:router} = useRouter()

const ${1:route} = useRoute()

const router = createRouter({
  history: createWebHashHistory(),
  routes: ${1:routes},
  scrollBehavior(to, from, savedPosition) {
    $2
  }
})

Vue Router (template)

${1|to,:to|}="$2"

:to="`$1${${2:id}}$3`"

:to="{ $1 }"

:to="{ name: '$1',$2 }"

:to="{ path: '$1',$2 }"

<RouterView>
  $0
</RouterView>

<RouterLink ${1|to,:to|}="$2">$3</RouterLink>

<RouterLink :to="`$1${${2:id}}$3`">$4</RouterLink>

<RouterLink :to="{ $1 }">$2</RouterLink>

<RouterLink :to="{ name: '$1'$2 }">$3</RouterLink>

<RouterLink :to="{ path: '$1'$2 }">$3</RouterLink>

Javascript

import ${2:moduleName} from '${1:module}';$0

import '${1:module}';$0

import { $2 } from '${1:module}';$0

import * as ${2:alias} from '${1:module}';$0

import { ${2:originalName} as ${3:alias} } from '${1:module}';$0

require('${1:package}');

const ${1:packageName} = require('${1:package}');$0

module.exports = {
  $0
};

${1:array}.${2|map,filter,...|}((${3:element}) => {
  $0
});