Vue VSCode Snippets installs statistics

Vue VSCode Snippets

Description

These snippets were built to supercharge a workflow in the most seamless manner possible.

This repo was built particularly for real world use. It doesn't catalogue the API definitions, rather, it focuses on developer ergonomics from the point of Vue of real world use. Included are the pieces I personally get sick of typing, and boilerplate that is helpful to stub out quickly.

Versions Supported: Vue 2 and Vue 3

Installation

Either

• click the extensions button (lowest square icon in the editor), and type in Vue VSCode Snippets, select the one by sdras

or

• go here vscode Extensions Marketplace

ext install Vue VSCode Snippets

You can enable tab completion (recommended) by opening Code > Preferences > Settings (on a Mac) and applying "editor.tabCompletion": "onlySnippets" to your personal settings

Snippets

Vue

These snippets are meant to provide a base scaffold for your single file components (SFC).

Snippet	Purpose
vbase-3-ss	SFC base with script setup
vbase-3-ss-ts	SFC base with script setup and TypeScript
vbase	SFC base with SCSS
vbase-3	SFC Composition API with SCSS
vbase-3-setup	SFC setup Composition API with SCSS
vbase-3-setup	SFC setup Composition API with SCSS
vbase-3-reactive	SFC Composition API with Reactive and SCSS
vbase-css	SFC base with CSS
vbase-pcss	SFC base with PostCSS
vbase-styl	SFC base with Stylus
vbase-ts	SFC base with Typescript
vbase-ts-class	SFC base with Typescript Class Format
vbase-3-ts	SFC Composition API with Typescript
vbase-3-ts-setup	SFC setup Composition API with Typescript
vbase-ns	SFC with no styles
vbase-sass	SFC base with SASS
vbase-less	SFC base with LESS

Template

Snippet	Purpose
vfor	v-for directive
vmodel	Semantic v-model directive
vmodel-num	Semantic v-model number directive
von	v-on click handler with arguments
vslot-named	Named slot
vel-props	Component element with props
vsrc	Image src binding
vstyle	Inline style binding
vstyle-obj	Inline style binding with objects
vclass	Class binding
vclass-obj	Class binding with objects
vclass-obj-mult	Multiple conditional class bindings
vanim	Transition component with JS hooks
vnuxtl	Nuxt Routing Link
vroutename	router-link Named Routing
vroutenameparam	router-link Named with Parameters
vroutepath	router-link Path Routing Link
vemit-child	Emit event from child component
vemit-parent	Emit event to parent component

Script…