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`
`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
`viconfig`	Vitest config for Vue 3
`viconfig-nuxt`	Vitest config for Nuxt 3
`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.

License

pixel-fabian/vue3-vscode-snippets

ErrorLooks like something went wrong!

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Error
Looks like something went wrong!

Packages