Snippets for vue/nuxt projects
npm install nuxt-snippets
!Visual Studio Marketplace Version
!Visual Studio Marketplace Installs
!GitHub
!Vue Version
- 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.
$1, $2, $3 specify cursor locations, in order in which tabstops will be visited$0 denotes the final cursor position${1:name} ${1|one,two,three|}. ${1|one,...|}. .vue files| Prefix | Name | Body |
v:base | Vue SFC | ``
` |
v:base:full | Vue SFC with style | postcss | `
` |
v:base:full:css | Vue SFC with style | css | `
` |
v:base:full:scss | Vue SFC with style | scss | `
` |
v:base:full:less | Vue SFC with style | less | `
` |
v:base:script | Vue script setup | ts | ` ` |
v:base:template | Vue template | ` ` |
v:base:style | Vue scoped style | postcss | ` ` |
v:base:style:lang | Vue style with language option | ` ` |
v:base:style:css | Vue scoped style | css | ` ` |
v:base:style:scss | scoped style | scss | ` ` |
v:base:style:less | scoped style | less | ` ` |
v:base:style:module | Vue style with CSS modules | ` ` |
v:base:style:src | Vue scoped style with src | ` ` |
| Prefix | Name | Body |
v:slot | slot | ` |
v:slot:named | named slot | ` |
v:template:named | named template | ` |
v:component | Vue component | ` |
v:keep-alive | Vue KeepAlive | ` |
v:teleport | Vue teleport | ` |
v:transition | Vue Transition | ` |
v:transition:name | Vue Transition with name | ` |
v:transition:type | Vue Transition with type | ` |
v:transition:appear | Vue Transition with appear | ` |
v:transition-group | Vue TransitionGroup | ` |
v:suspense | Vue Suspense | ` |
v:suspense:fallback | Vue Suspense with fallback | ` |
v:text | v-text | ` |
v:html | v-html | ` |
v:show | v-show | ` |
v:if | v-if | ` |
v:eif | v-else-if | ` |
v:else | v-else | ` |
v:for | v-for | ` |
v:fori | v-for (indexed) | ` |
v:forr | v-for range | ` |
v:emit | emit | ` |
v:emit:pass | Vue pass emit | ` |
v:on | v-on | ` |
v:on:event | event handler | ` |
v:on:click | click handler | ` |
v:on:input | input handler | ` |
v:on:update | update handler | ` |
v:on:change | change handler | ` |
v:on:blur | blur handler | ` |
v:on:focus | focus handler | ` |
v:on:submit | submit handler | ` |
v:bind | v-bind | ` |
v:bind:attrs | v-bind attrs | ` |
v:bind:props | v-bind props | ` |
v:bind:full | v-bind props and attrs | ` |
v:model | v-model | ` |
v:model:number | v-model.number | ` |
v:model:trim | v-model.trim | ` |
v:model:custom | custom v-model | ` |
v:v-slot | scoped slot | ` |
v:pre | v-pre | ` |
v:once | v-once | ` |
v:memo | v-memo | ` |
v:cloak | v-cloak | ` |
v:key | Vue key | ` |
v:ref | Vue ref | ` |
v:name | name property | ` |
v:is | is property | ` |
v:b | bind attribute | ` |
v:a | attribute | ` |
v:class | Vue classes | ` |
v:class:list | Vue classes list | ` |
v:class:cond | Vue conditional classes | ` |
v:style | Vue inline style | ` |
v:style:list | Vue inline style list | ` |
v:v | Vue | ` |
v:vt | Vue i18n translation | ` |
v:if:slot | v-if slot defined | ` |
v:if:slot-prop | v-if slot or prop defined | ` |
v:for:template | v-for in template | ` |
v:fori:template | v-for (indexed) in template | ` |
v:if:template | v-if in template | ` |
v:tif | template with v-if | ` |
| Prefix | Name | Body |
v:ref | Vue ref | ` |
v:ref:ts | Vue ref (typed) | ` |
v:computed | Vue computed | ` |
v:computed:ts | Vue computed (typed) | ` |
v:computed:gs | Vue computed (get/set) | ` |
v:reactive | Vue reactive | ` |
v:reactive:ts | Vue reactive (typed) | ` |
v:shallowRef | Vue shallowRef | ` |
v:toRef | Vue toRef | ` |
v:toRefs | Vue toRefs | ` |
v:unref | Vue unref | ` |
v:readonly | Vue readonly | ` |
v:ref:elem | Vue element ref | ` |
v:watchEffect | Vue watchEffect | ` |
v:watch | Vue watch source | ` |
v:watch:inline | Vue watch inline | ` |
v:watch:getter | Vue watch getter | ` |
v:watch:multiple | Vue watch multiple | ` |
v:watch:immediate | Vue watch immediate | ` |
v:watch:deep | Vue watch deep | ` |
v:props | Vue defineProps | ` |
v:props:defaults | Vue defineProps with defaults | ` |
v:emits | Vue defineEmits | ` |
v:model | Vue defineModel | ` |
v:emit | Vue emit event | ` |
v:expose | Vue defineExpose | ` |
v:onMounted:async | Vue onMounted | ` |
v:onBeforeMount | Vue onBeforeMount | ` |
v:onUnmounted | Vue onUnmounted | ` |
v:onBeforeUnmount | Vue onBeforeUnmount | ` |
v:onUpdated | Vue onUpdated | ` |
v:onBeforeUpdate | Vue onBeforeUpdate | ` |
v:onErrorCaptured | Vue onErrorCaptured | ` |
v:onActivated | Vue onActivated | ` |
v:onDeactivated | Vue onDeactivated | ` |
v:provide | Vue provide | ` |
v:provide:ts | Vue provide (typed) | ` |
v:inject | Vue inject | ` |
v:inject:ts | Vue inject (typed) | ` |
v:inject:default | Vue inject with default | ` |
v:inject:key | Vue injection key | ` |
v:slots | Vue useSlots | ` |
v:attrs | Vue useAttrs | ` |
v:import | Import from vue | ` |
| Prefix | Name | Body |
v:composable | Vue define composable | ` ` |
v:composable:file | Vue define composable in file | ` ` |
v:use | Use composable | ` |
v:used | Use composable with destructuring | ` |
v:has-slot | Vue check for slots | ` |
| Prefix | Name | Body |
v:n:fetch | Nuxt useFetch | ` |
v:n:fetch:cb | Nuxt useFetch with callback | ` |
v:n:fetch:lazy | Nuxt useLazyFetch | ` |
v:n:fetch:lazy:cb | Nuxt useLazyFetch callback | ` |
v:n:fetch:post | Nuxt useFetch POST | ` |
v:n:asyncdata | Nuxt useAsyncData | ` |
v:n:asyncdata:lazy | Nuxt useLazyAsyncData | ` |
v:n:app | Nuxt useNuxtApp | ` |
v:n:appConfig | Nuxt useAppConfig | ` |
v:n:runtimeConfig | Nuxt useRuntimeConfig | ` |
v:n:cookie | Nuxt useCookie | ` |
v:n:cookie:opts | Nuxt useCookie with options | ` |
v:n:data | Nuxt useNuxtData | ` |
v:n:error | Nuxt useError | ` |
v:n:state | Nuxt useState | ` |
v:n:state:init | Nuxt useState (init) | ` |
v:n:head | Nuxt useHead | ` |
v:n:head:title | Nuxt useHead title | ` |
v:n:pageMeta | Nuxt definePageMeta | ` |
v:n:pageMeta:title | Nuxt definePageMeta title | ` |
v:n:pageMeta:layout | Nuxt definePageMeta layout | ` |
v:n:pageMeta:middleware | Nuxt definePageMeta middleware | ` |
v:n:to | Nuxt navigateTo | ` |
v:n:to:obj | Nuxt navigateTo object | ` |
v:n:to:replace | Nuxt navigateTo replace | ` |
v:n:to:external | Nuxt navigateTo external | ` |
v:n:to:redirect | Nuxt navigateTo redirect | ` |
v:n:to:name | Nuxt navigateTo name | ` |
v:n:to:path | Nuxt navigateTo path | ` |
v:n:plugin | Nuxt plugin | ` |
v:n:plugin:vue | Nuxt plugin use vue package | ` |
v:n:middleware:route | Nuxt route middleware | ` |
v:n:middleware:server | Nuxt server middleware | ` |
v:n:api | Nuxt api route | ` |
v:n:plugin:server | Nuxt server plugin | ` |
v:n:readBody | Nuxt readBody | ` |
v:n:getQuery | Nuxt getQuery | ` |
v:n:getCookie | Nuxt getCookie | ` |
v:n:setCookie | Nuxt setCookie | ` |
| Prefix | Name | Body |
v:n:link | NuxtLink | ` |
v:n:link:blank | NuxtLink with target _blank | ` |
v:n:link:external | NuxtLink with target external | ` |
v:n:link:param | NuxtLink with param | ` |
v:n:link:obj | NuxtLink with object | ` |
v:n:link:name | NuxtLink with name | ` |
v:n:link:path | NuxtLink with path | ` |
v:n:loading | NuxtLoadingIndicator | ` |
v:n:layout | NuxtLayout | ` |
v:n:layout:name | NuxtLayout with name | ` |
v:n:page | NuxtPage | ` |
v:n:page:static | NuxtPage with static key | ` |
v:n:client | ClientOnly | ` |
v:n:client:fallbacks | ClientOnly with fallback props | ` |
v:n:client:fallback | ClientOnly with fallback template | ` |
v:n:Teleport | Nuxt Teleport | ` |
| Prefix | Name | Body |
pstore | Setup Pinia store | ` export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', () => { ` |
pstore:options | Setup Pinia store (Options) | ` export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', { ` |
vuseStore / vus | Use store | ` |
| Prefix | Name | Body |
v:router | Vue router | ` |
v:route | Vue route | ` |
v:router:create | Create Vue router | ` |
| Prefix | Name | Body |
v:to | Vue Router to | ` |
v:to:param | Vue Router :to with param | ` |
v:to:obj | Vue Router :to object | ` |
v:to:name | Vue Router :to name | ` |
v:to:path | Vue Router :to path | ` |
v:view | RouterView | ` |
v:link | RouterLink | ` |
v:link:param | RouterLink with param | ` |
v:link:obj | RouterLink with object | ` |
v:link:name | RouterLink with name | ` |
v:link:path | RouterLink with path | ` |
| Prefix | Name | Body |
imp | import | ` |
imn | importNoModuleName | ` |
imd | importDestructing | ` |
ime | importEverything | ` |
ima | importAs | ` |
rqr | require | ` |
req | requireToConst | ` |
mde | moduleExports | ` ` |
arr:methods | array methods | ` |