vue.code-snippets

{
    "template": {
        "scope": "vue",
        "prefix": "template",
        "body": ["<template>", "  $1", "</template>"],
        "description": "Create <template> block"
    },
    "script setup": {
        "scope": "vue",
        "prefix": "script setup",
        "body": [
            "<script lang=\"ts\" setup>",
            "defineProps<{ $1 }>()",
            "</script>"
        ],
        "description": "Create <script setup> + <script> blocks"
    },
    "style": {
        "scope": "vue",
        "prefix": "style",
        "body": ["<style lang=\"pcss\" scoped>", "$1", "</style>"],
        "description": "Create <style> block"
    },
    "import": {
        "prefix": "import",
        "body": [
            "import { ${1|ref, reactive, computed, unref, watch, watchEffect, toRef, toRefs, toRaw|} } from 'vue'"
        ],
        "description": "Import Vue 3 API's"
    },
    "Computed Property Function": {
        "prefix": "computed",
        "body": "/**\n * ${1:computedPropertyName}${2: - }${3:description of what the property does}\n */\n${1:computedPropertyName}: computed(() => {\n\treturn ${4:/* value of computed property */}\n})",
        "description": "Stubs out a function that defines a reactive computed property."
    },
    "Computed w/ getter and setter": {
        "prefix": "computed with getter and setter",
        "body": "/**\n * ${1:computedPropertyName}${2: - }${3:description of what the property does}\n */\n${1:computedPropertyName}: computed({${4:/* // If you use this function outside of a `reactive()`, make sure you use `.value` to unwrap reactive references. */}${5:\n\t/* see: https://v3.vuejs.org/api/computed-watch-api.html#computed /*}\n\tget: ()${6:: any} => {\n\t\t${7:// function that returns the value of the computed property}\n\t\\},\n\tset: (value${8:: any}) => {\n\t\t${9:// function that returns nothing}\n\t\\}\n}),",
        "description": "Stubs out a function that defines a reactive computed property with a getter and a setter."
    },
    "Drawer": {
        "prefix": "drawer",
        // "body": "/**\n * ${1:drawerName}${2: - }${3:description of what the drawer does}\n */\n<template>\n\t<Drawer class=\"${4:drawer-container}\" v-bind:class=\"{ 'drawer-open': open }\">\n\t\t<slot></slot>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: '${5:drawerName}',\n\tprops: {\n\t\topen: {\n\t\ttype: Boolean,\n\t\tdefault: false\n\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\t// ...\n\t\t}\n\t},\n\tcomputed: {\n\t\t// ...\n\t},\n\tmethods: {\n\t\t// ...\n\t}\n}",
        "body": ["<template>", "  $1", "</template>"],
        "description": "Stubs out a drawer component."
    },
    "v-for": {
        "scope": "html",
        "prefix": "v-for",
        "body": ["<template v-for=\"$1 in $2\">", "  $3", "</template>"],
        "description": "Create html tag with v-for"
    },
    "v-if": {
        "scope": "html",
        "prefix": "v-if",
        "body": ["<template v-if=\"$1\">", "  $2", "</template>"],
        "description": "Create html tag with v-if"
    },
    "v-else-if": {
        "scope": "html",
        "prefix": "v-else-if",
        "body": ["<template v-else-if=\"$1\">", "  $2", "</template>"],
        "description": "Create html tag with v-else-if"
    },
    "v-else": {
        "scope": "html",
        "prefix": "v-else",
        "body": ["<template v-else>", "  $2", "</template>"],
        "description": "Create html tag with v-else"
    }
}