Vue and Nuxt Snippets for VSCode
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:/pascalcase}/}() {
$0
return {
}
}
|
v:composable:file |
Vue define composable in file |
export function ${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}() {
$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:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', () => {
$0
return {
}
})
|
pstore:options |
Setup Pinia store (Options) |
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 |
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
});
|
| |
