Vue 3 VS Code Snippets

Description

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).

Supported versions

• Vue 3

Installation

• 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.

Snippets

.vue files

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

Template

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

Script

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

CSS

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

Pinia

Snippet	Purpose
pstore	Base code needed for a Pinia store file
pstore-composition	Base code needed for a Pinia store file with Composition API

Vue Router

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

Nuxt Template

Snippet	Purpose
nlink	Nuxt router link
nlink-param	Nuxt router link with param

Nuxt Script

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

Histoire

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

Vitest

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

Vitest Vue

Snippet	Purpose
vimount	Vue Test Utils mount
vicomponent	Vue Test Utils Component

Vitest Nuxt

Snippet	Purpose
vimount-suspended	nuxt-vitest mountSuspended
vimocknuxtimport	nuxt-vitest mockNuxtImport
vimockcomponent	nuxt-vitest mockComponent
viregisterendpoint	nuxt-vitest registerEndpoint

Contributing

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!

License

Copyright © 2022 Vasily Kuzin.

This project is MIT licensed.