Vue 3 VS Code Snippets

Visual Studio Marketplace Version Visual Studio Marketplace Installs GitHub

vue3-vscode-snippets-hero

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
`vsuspense`	Suspense wrapper with fallback content

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

This project is MIT licensed.

Vue 3 VS Code Snippets

ExEr7um

Vue 3 VS Code Snippets

Description

Supported versions

Installation

Snippets

.vue files

Template

Script

CSS

Pinia

Vue Router

Nuxt Template

Nuxt Script

Histoire

Vitest

Vitest Vue

Vitest Nuxt

Contributing

License

`.vue` files