Vue Modern Snippets
Vue template snippets
These snippets will help you create the basic outline for a Vue component.
| Snippet |
Purpose |
vbase |
Single file component base with CSS |
vbase-generic |
Generic Single file component base with CSS |
Vue lifecycle snippets
Below are each of Vue lifecycle hooks snippet shortcuts, with selectors:
- vonbeforemount
- vonmounted
- vonbeforeupdate
- vonupdated
- vonbeforeunmount
- vonunmounted
- vonerrorcaptured
- vonrendertracked
- vonactivated
- vondeactived
- vonserverprefetch
Vue script snippets
These snippets are usable either in Vue or Typescript files; These are
the 'bread and butter' snippets to supercharge your workflow.
| Snippet |
Purpose |
vprops |
defineProps with generics |
vemits |
defineEmits with generics |
vslots |
defineSlots with generics |
vstore |
provide/inject store template |
vmodel |
defineModel |
vref |
ref with selectors |
vreactive |
reactive with selectors |
vcomputed |
computed with selectors |
vcomputedgetset |
computed getter/setter |
vwatch |
watch with selectors |
vwatch-array |
watch array with selectors |
vwatcheffect |
watchEffect with selectors |
Nuxt
| Snippet |
Purpose |
nuxtusefetch |
Nuxt useFetch with selectors |
nuxtasyncdata |
Nuxt useAsyncData with selectors |
| |
