My Most Used, Biggest Time Saving Vue.js Code Snippets

vue.code-snippets

{
	"Generate a new vue.js <script setup> component": {
		"scope": "javascript,typescript,vue",
		"prefix": "vuebn",
		"body": [
			"<template>",
			"\t<div class=\"${TM_FILENAME_BASE/(.*)/${1:/downcase}/}-w\">",
			"\t\t${TM_FILENAME_BASE}.vue$0",
			"\t</div>",
			"</template>",
			"",
			"<script lang=\"ts\" setup>",
			"\t",
			"</script>",
			"",
			"<style scoped>",
			"\t.${TM_FILENAME_BASE/(.*)/${1:/downcase}/}-w {",
			"\t\t",
			"\t}",
			"</style>",
			""
		],
		"description": "Generate a new vue.js <script setup> component"
	},
	"Generate a new composable function (hook)": {
		"prefix": "hkk",
		"body": [
			"export default function use$1() {",
			"\t",
			"\t$0",
			"\t",
			"\treturn {",
			"\t\t",
			"\t};",
			"}"
		],
		"description": "Generate a new composable function (hook)"
	},
  	"Reference": {
		"scope": "javascript,typescript,vue",
		"prefix": "reff",
		"body": [
			"const ${1:var} = ref(${2:default})",
		],
		"description": "Reference"
	},
	"Computed Property": {
		"scope": "javascript,typescript,vue",
		"prefix": ["v3comp", "compp", "compu"],
		"body": [
			"const ${1:varName} = computed(_ => $2)$0",
		],
		"description": "Computed Property"
	},
  	"On Mounted lifecycle hook": {
    	"scope": "javascript,typescript,vue",
		"prefix": "onmm",
		"body": [
			"onMounted(() => {",
			"\t$0",
			"})"
		],
		"description": "On Mounted lifecycle hook"
	},
	"Use Composable (hook)": {
		"scope": "javascript,typescript,vue",
		"prefix": "usee",
		"body": [
			"const {$2} = use$1()$0"
		],
		"description": "Use Composable (hook)"
	}
}