![Vue Version](https://camo.githubusercontent.com/e7af7c1c7cea3c03ec73ee1513870200ac53dcf8007c19e599fc5eeff03fb09e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7675652d332d2532333446433038443f6c6f676f3d767565646f746a73)
![vue3-vscode-snippets-hero](https://camo.githubusercontent.com/58935adc75edf5f71eb051922dcf459cca8fb6f47279ae5e2375206212475703/68747470733a2f2f692e696d6775722e636f6d2f716c676151686c2e676966)
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).
- You can do it by finding
Vue 3 VSCode Snippets
by exer7um
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 |
Snippet |
Purpose |
vref |
Vue ref |
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 |
vdefineemits |
Define emits |
vdefineemits-nopayload |
Define emits with no payload |
vsingleemit |
Single emit for defineEmits |
vsingleemit-nopayload |
Single emit for defineEmits with no payload |
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 |
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 |
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.