Vue 3 Visual Studio Code Snippets

Across projects and within web application you will find yourself creating a lot of repetitive boilerplate code. VS Code and other IDE's (integrated development environments) have support which allows you to include custom code snippets just by typing a reference to them. Using snippets allows you to rapidly scaffold a large application quickly and also speeds up day to day development. The following are Vue 3 VS code snippets which can be used to quickly scaffold files.

To add a snippet in VS code go to - Code > Preferences > Configure User Snippets. You can create a snippet file for your local project, workspace, or globally.

A couple of important keys in the Vue 3 VS code snippets:

• scope - refers to the languages the snippet applies to
• prefix - what you type to bring up the snippet

Placeholders such as ${1:name} etc can be used in code snippets with a default value and tabbed through in a sequence finishing on \t$0.

• Vue 3 component VS Code snippet
• Vue 3 composition VS Code snippet

Vue 3 component VS Code snippet

• ${1:class} - CSS class name set on style and div tag
• ${2:prop} - prop name
• ${3:string} - prop value
• \t$0 - ends on create new prop

{
    "Vue 3 component": {
        "scope": "vue",
        "prefix": "vue-3-component",
        "description": "Vue 3 component",
        "body": [
            "<script setup lang=\"ts\">",
            "// props",
            "withDefaults(",
            "    defineProps<{",
            "        ${2:prop}?: ${3:string}",
            "\t$0",
            "    }>(),",
            "    {",
            "        ${2:prop}: undefined",
            "    }",
            ")",
            "</script>",
            "",
            "<template>",
            "    <div class=\"${1:class}\">",
            "",
            "    </div>",
            "</template>",
            "",
            "<style lang=\"scss\" scoped>",
            ".${1:class} {",
            "}",
            "</style>",
        ],
    }
}

Vue 3 composition VS Code snippet

• ${1:name} - composition name
• \t$0 - ends inside composition

{
    "Vue 3 composition": {
        "scope": "javascript,typescript,vue",
        "prefix": "vue-3-composition",
        "description": "Vue 3 composition",
        "body": [
            "export function use${1:name}() {",
            "\t$0",
            "    return {",
            "    }",
            "}",
        ],
    }
}