Skip to content

Instantly share code, notes, and snippets.

@trandaison

trandaison/vue-script.code-snippets

Last active May 18, 2023 10:00
Show Gist options
  • Save trandaison/0447a249f07ff9e459ff7e4c7e4c536b to your computer and use it in GitHub Desktop.
Save trandaison/0447a249f07ff9e459ff7e4c7e4c536b to your computer and use it in GitHub Desktop.
Download ZIP
Some Vue Snippets
Raw
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 '';"
},
}
Raw
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"
}
}
Raw
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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment