Vuejs Snippets

Description

Short and simple vue snippets!

This project still needs support for nuxt, vite config, vue 2, vue router, and pinia.

• Contributions are welcome github
• If you're submitting a code snippet, it's essential to include corresponding documentation within the tables in the README. Please note that we won't be able to accept your pull request without this documentation. Thank you for your understanding!

Installation

• Go here vscode extensions marketplace

Vue

Snippet	Purpose
vueinit	Single file component with script setup, template, and style
vuesfinit	Single file component with script setup function, template, and style
vuescript	vue script tag
vuetemplate	vue template tag
vuestyle	vue style tag

TypeScript Vue

Snippet	Purpose
vuetsinit	TypeScript Vue SFC with script setup
vuetsdefineprops	TypeScript define props with interface
vuetsdefineemits	TypeScript define emits with type interface
vuetsref	TypeScript ref with type annotation
vuetsreactive	TypeScript reactive state with interface
vuetscomputed	TypeScript computed property with type annotation

Script

Snippet	Purpose
vuedefineprops	define properties
vuecomputed	computed property
vuewatch	watcher
vueprovide	vue provide
vueinject	vue inject
vueonmounted	mounted lifecycle method
vueonunmounted	mounted lifecycle method
vueonbeforemount	beforeMount lifecycle method
vueonbeforeunmount	beforeMount lifecycle method
vueonbeforeupdate	beforeUpdate lifecycle method
vueonupdated	updated lifecycle method
vueonactivated	keepalive lifecycle method
vueondeactivated	keepalive lifecycle method
vueonrendertracked	called when a reactive dependency has been tracked
vueonrendertriggered	reactive dependency triggers the component's render effect to be re-run

Template

Snippet	Purpose
vtext	v-text
vhtml	inserting html
vshow	setting element to display one
vif	removing or adding element to dom
velse	v-else
velseif	use along side v-if
vfor	v-for directive
von	v-on click handler with arguments
vbind	binding onto attributes
vmodel	Semantic v-model directive
vslot	denotes named slot
vpre	skip compilation for this element and its children
vonce	evaluate only once
vmemo	memoize data
vcloak	Used to hide un-compiled template until it is ready
vkey	key
vref	reference to a dom element

Enjoy!