Skip to content

Vuejs Snippets

vuejs-snippet-hero

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!

vuejs-snippet-demo

Installation

Go here vscode extensions marketplace

Vue

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

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!