Vue 3 code snippets for VS Code

vue3.code-snippets

{
  "Vue SFC": {
    "prefix": "sfc",
    "scope": "vue",
    "body": [
      "<template>",
      "\t${1}",
      "</template>",
      "",
      "<script>",
      "export default {",
      "\tsetup () {",
      "\t\t${0}",
      "\t}",
      "}",
      "</script>",
      "",
      "<style scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "Base for Vue Single File Components"
  },
  "Vue SFC Quick Setup": {
    "prefix": "sfc-setup",
    "scope": "vue",
    "body": [
      "<template>",
      "\t${1}",
      "</template>",
      "",
      "<script setup=\"props, context\">",
      "${0}",
      "</script>",
      "",
      "<style scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "Base for Quick Setup SFC"
  },
  "Vue SFC TypeScript": {
    "prefix": "sfc-ts",
    "scope": "vue",
    "body": [
      "<template>",
      "\t${1}",
      "</template>",
      "",
      "<script lang=\"ts\">",
      "import { defineComponent } from 'vue'",
      "",
      "export default defineComponent({",
      "\tsetup () {",
      "\t\t${0}\n",
      "\t\treturn {}",
      "\t}",
      "})",
      "</script>",
      "",
      "<style scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "Vue 3: Base for Single File Components"
  },
  "Vue SFC Quick Setup TypeScript": {
    "prefix": "sfc-setup-ts",
    "scope": "vue",
    "body": [
      "<template>",
      "\t${1}",
      "</template>",
      "",
      "<script setup=\"props, context\" lang=\"ts\">",
      "\t${0}",
      "</script>",
      "",
      "<style scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "Vue 3: Base for Quick Setup SFC with TypeScript "
  },
  "Suspense": {
    "prefix": "suspense",
    "scope": "vue",
    "body": [
      "<Suspense>",
      "\t<template #default>",
      "\t\t${1}",
      "\t</template>",
      "\t<template #fallback>",
      "\t\t${0}",
      "\t</template>",
      "</Suspense>"
    ],
    "description": "Vue 3: Base for Quick Setup SFC with TypeScript "
  }
}

How to use

Select User Snippets under File > Preferences (Code > Preferences on macOS), and then select the New Global Snippets file option or New Snippets file for 'project-name' . This way you can always come back and edit your snippets to your liking.

Copy the content from the gist into the newly created file.

These snippets will only work for .vue files. I suggest using Vetur for better support.

Codes

• sfc - Single File Component
• sfc-ts - Single File Component for TypeScript
• sfc-setup - SFC with quick setup()
• sfc-setup-ts - SFC with quick setup() and TypeScript
• suspense - Type this inside a <template> for a quick Suspense scaffolding