Some Vue Snippets

vue-script.code-snippets

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  // 	"scope": "javascript,typescript",
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }

  "Define props without type": {
    "prefix": "props",
    "scope": "javascript,typescript",
    "body": [
      "const props = defineProps<{",
      "  ${1:name}: ${2:string};",
      "}>();"
    ],
    "description": "Define props without type"
  },
  "Define props": {
    "prefix": "props",
    "scope": "javascript,typescript",
    "body": [
      "type Props = {",
      "  ${1:name}: ${2:string};",
      "};",
      "",
      "const props = defineProps<Props>();"
    ],
    "description": "Define props"
  },
  "Define props with defaults": {
    "prefix": "propsWithDefaults",
    "scope": "javascript,typescript",
    "body": [
      "type Props = {",
      "  ${1:name}: ${2:string};",
      "};",
      "",
      "const props = withDefaults(defineProps<Props>(), {",
      "  ${1:name}: ${3:'$4'},",
      "});"
    ],
    "description": "With defaults"
  },
  "Define props with defaults without type": {
    "prefix": "propsWithDefaults",
    "scope": "javascript,typescript",
    "body": [
      "const props = withDefaults(defineProps<{",
      "  ${1:name}: ${2:string};",
      "}>(), {",
      "  ${1:name}: ${3:'$4'},",
      "});"
    ],
    "description": "With defaults without type"
  },
  "Define emits": {
    "prefix": "emit",
    "scope": "javascript,typescript",
    "body": [
      "const emit = defineEmits<{",
      "  (e: '${1:update:modelValue}', ${2:value: ${3:any}}): ${4:void};",
      "}>();"
    ],
    "description": "Define emits"
  },
  "useAsyncData": {
    "prefix": "asynData",
    "scope": "javascript,typescript",
    "body": [
      "const { data: ${1:items}, ${2:pending} } = useAsyncData(${3:async} () => {",
			"  ${4:await} $5",
			"});"
    ],
    "description": "useAsyncData()"
  },
  "useI18n": {
    "prefix": "useI18n",
    "scope": "javascript,typescript",
    "body": [
      "const { t${1:: \\$t} } = useI18n();",
    ],
    "description": "useI18n()"
  },
  "useLocalePath()": {
    "prefix": "localePath",
    "scope": "javascript,typescript",
    "body": [
      "const localePath = useLocalePath();",
    ],
    "description": "useLocalePath()"
  },
  "useLocaleRoute()": {
    "prefix": "localeRoute",
    "scope": "javascript,typescript",
    "body": [
      "const localeRoute = useLocaleRoute();",
    ],
    "description": "useLocaleRoute()"
  },
	"import from": {
    "prefix": "import",
    "scope": "javascript,typescript",
    "body": [
      "import ${2:{ $3 \\}} from '$1';",
    ],
    "description": "import {} from '';"
  },
}

vue-template.json.code-snippets

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  // 	"scope": "javascript,typescript",
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }

  "<transition name='fade'>": {
    "prefix": "transition",
    "body": ["<transition name=\"${1:fade}\" ${2:mode=\"${3:out-in}\"}>", "  $4", "</transition>"],
    "description": "<transition name=\"fade\">"
  },
  "<component is>": {
    "prefix": "component",
    "body": ["<component ${1::}is=\"${2:name}\">", "  $3", "</component>"],
    "description": "component is"
  },
  "<component is />": {
    "prefix": "component",
    "body": ["<component ${1::}is=\"${2:name}\" />"],
    "description": "component is self close"
  },
  "v-for": {
    "prefix": "vfor",
    "body": ["v-for=\"${1:(${2:item}, ${3:index})} in ${4:array}\" :key=\"${2:item}$5\""],
    "description": "v-for=\"item in array\" w/ key"
  }
}

vue.json.code-snippets

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	"Options API - <script lang=\"ts\">": {
		"prefix": "scr",
		"body": [
			"<script lang=\"ts\">",
			"import Vue from 'vue';",
			"",
			"export default Vue.extend({",
			"  name: '${1:ComponentName}',",
			"});",
			"</script>",
			""
		],
		"description": "<script lang=\"ts\"> (Options API)"
	},

	"Class API - <script lang=\"ts\">": {
		"prefix": "scr",
		"body": [
			"<script lang=\"ts\">",
			"import { Vue, Component } from 'nuxt-property-decorator';",
			"",
			"@Component({ name: '${1:ComponentName}' })",
			"export default class ${1:ComponentName} extends Vue {}",
			"</script>",
			""
		],
		"description": "<script lang=\"ts\"> (Class API)"
	},
	
	"Script setup ts": {
		"prefix": "setup",
		"body": [
			"<script lang=\"ts\" setup>",
			"$1",
			"</script>"
		],
		"description": "Script setup ts"
	},
	"Style scoped scss": {
		"prefix": "scss",
		"body": [
			"<style lang=\"scss\" scoped>",
			"$1",
			"</style>"
		],
		"description": "Script setup ts"
	},
	"Single file component without style": {
		"prefix": "sfc:setup:template",
		"body": [
			"<script lang=\"${1:ts}\" setup>",
			"$3",
			"</script>",
			"",
			"<template>",
			"  <div>$2</div>",
			"</template>",
			""
		],
		"description": "Single file component without style"
	},
	"Single file component": {
		"prefix": "sfc:setup:template:style",
		"body": [
			"<script lang=\"${1:ts}\" setup>",
			"$3",
			"</script>",
			"",
			"<template>",
			"  <div>$2</div>",
			"</template>",
			"",
			"<style lang=\"scss\" scoped>",
			"$4",
			"</style>"
		],
		"description": "Single file component"
	}
}