These snippets were made to speed up Vue 3 development. With it you can write boilerplate code infinitely faster.
I took my inspiration from vue-vscode-snippets extension made by @sdras.
A lot of snippets here were taken from that extension and then improved by me to be more useful with Vue 3 (and Vue 3 only).
- Vue 3
- You can do it by finding
Vue 3 VSCode Snippets
byexer7um
in VS Code marketplace and clicking install. - Or you can follow that link and click install.
Snippet | Purpose |
---|---|
vbase |
Base for Vue 3 File with <script setup> , TypeScript and SCSS |
vbase-sass |
Base for Vue 3 File with <script setup> , TypeScript and SASS |
vbase-less |
Base for Vue 3 File with <script setup> , TypeScript and LESS |
vbase-pcss |
Base for Vue 3 File with <script setup> , TypeScript and PostCSS |
vbase-css |
Base for Vue 3 File with <script setup> , TypeScript and CSS |
vbase-styl |
Base for Vue 3 File with <script setup> , TypeScript and Stylus |
vbase-ns |
Base for Vue 3 File with <script setup> , TypeScript and no style |
Snippet | Purpose |
---|---|
vfor |
v-for statement |
vmodel |
v-model directive |
von |
v-on click handler |
vel-props |
Component element with props |
vslot-named |
Named slot |
vimg |
Image source binding |
vstyle |
Inline style binding |
vstyle-obj |
Inline style binding with objects |
vclass |
Class binding |
vclass-ter |
Ternary class binding |
vtrans |
Transition component |
vtrans-group |
Transition group component |
vrlink |
Router link |
vrlink-param |
Router link with param |
vsuspense |
Suspense wrapper with fallback content |
Snippet | Purpose |
---|---|
vref |
Vue ref |
vref-typed |
Vue ref with generic type argument |
vreactive |
Vue reactive |
vcomputed |
Vue computed |
vwatch |
Watcher |
vwatcheffect |
Watch Effect |
vonmounted |
onMounted hook |
vonbeforemount |
onBeforeMount hook |
vonbeforeupdate |
onBeforeUpdate hook |
vonupdated |
onUpdated hook |
vonerrorcaptured |
onErrorCaptured hook |
vonunmounted |
onUnmounted hook |
vonbeforeunmount |
onBeforeUnmount hook |
vdefineprops |
Define props |
vdefineprops-withdefaults |
Define props with defaults |
vdefineemits |
Define emits |
vsingleemit |
Single emit for defineEmits |
vdefineslots |
Define slots |
vsingleslot |
Single slot for defineSlots |
vdefineoptions |
Define Options |
vdefinemodel |
Define Model |
Snippet | Purpose |
---|---|
vcss-transition |
Vue Transition styles |
vcss-transition-named |
Vue Named Transition styles |
vcss-transition-tailwind |
Vue Transition styles for Tailwind CSS |
vcss-transition-named-tailwind |
Vue Named Transition styles for Tailwind CSS |
vcss-transition-group |
Vue Transition Group styles |
vcss-transition-group-tailwind |
Vue Transition Group styles for Tailwind CSS |
Snippet | Purpose |
---|---|
pstore |
Base code needed for a Pinia store file |
pstore-composition |
Base code needed for a Pinia store file with Composition API |
Snippet | Purpose |
---|---|
vrouter |
Vue Router base |
vscrollbehavior |
Vue Router scrollBehavior |
vbeforeeach |
Vue Router global guards beforeEach |
vbeforeresolve |
Vue Router global guards beforeResolve |
vaftereach |
Vue Router global guards afterEach |
vbeforeenter |
Vue Router per-route guard beforeEnter |
vbeforerouteenter |
Vue Router component guards beforeRouteEnter |
vbeforerouteupdate |
Vue Router component guards beforeRouteUpdate |
vbeforerouteleave |
Vue Router component guards beforeRouteLeave |
Snippet | Purpose |
---|---|
nlink |
Nuxt router link |
nlink-param |
Nuxt router link with param |
Snippet | Purpose |
---|---|
nfetch |
useFetch composable |
nfetch-lazy |
useLazyFetch composable |
nasyncdata |
useAsyncData composable |
nasyncdata-lazy |
useLazyAsyncData composable |
npagemeta |
definePageMeta composable |
nseo |
useSeoMeta composable |
nseo-template |
useSeoMeta composable - Template |
nseo-server |
useServerSeoMeta composable |
nseo-server-template |
useServerSeoMeta composable - Template |
nplugin |
Base code for Nuxt plugin |
nmiddleware |
Base code for Nuxt middleware |
nserverroute |
Base code for Nuxt server route |
Snippet | Purpose |
---|---|
hconfig |
Histoire config for Vue 3 |
hconfig-nuxt |
Histoire config for Nuxt 3 |
hbase |
Base code for story |
hbase-variant |
Base code for story with variant |
hbase-grid |
Base code for story with grid layout |
hvariant |
Story variant |
hgrid |
Histoire grid layout |
hcontrols-base |
Histoire controls base |
hcontrols-button |
Histoire controls - Button |
hcontrols-buttongroup |
Histoire controls - Button Group |
hcontrols-checkbox |
Histoire controls - Checkbox |
hcontrols-number |
Histoire controls - Number |
hcontrols-text |
Histoire controls - Text |
hcontrols-textarea |
Histoire controls - Textarea |
Snippet | Purpose |
---|---|
vibase |
Base for Vitest file |
vibase-vue |
Base for Vitest file for Vue component |
vibase-nuxt |
Base for Vitest file for Nuxt component |
videscribe |
Vitest Describe |
videscribe-concurrent |
Vitest Describe - Concurrent |
viit |
Vitest It |
viit-concurrent |
Vitest It - Concurrent |
viit-async |
Vitest It - Async |
viit-async-concurrent |
Vitest It - Async Concurrent |
viit-todo |
Vitest It - Todo |
vitest |
Vitest Test |
vitest-concurrent |
Vitest Test - Concurrent |
vitest-async |
Vitest Test - Async |
vitest-async-concurrent |
Vitest Test - Async Concurrent |
vitest-todo |
Vitest Test - Todo |
visnapshot |
Vitest Match Snapshot |
visnapshot-inline |
Vitest Match Snapshot - Inline |
Snippet | Purpose |
---|---|
vimount |
Vue Test Utils mount |
vicomponent |
Vue Test Utils Component |
Snippet | Purpose |
---|---|
vimount-suspended |
nuxt-vitest mountSuspended |
vimocknuxtimport |
nuxt-vitest mockNuxtImport |
vimockcomponent |
nuxt-vitest mockComponent |
viregisterendpoint |
nuxt-vitest registerEndpoint |
This is an open source project open to anyone. Contributors are welcome on GitHub.
If you are contributing a snippet, please be sure to add the documentation for it in the tables in the README
, the pull request cannot be accepted without this addition. Thanks!
Copyright © 2022 Vasily Kuzin.
This project is MIT licensed.