nuxt-vue.code-snippets

{
  "Nuxt Page Template": {
    "prefix": "nuxt-page",
    "scope": "vue",
    "body": [
      "<script lang=\"ts\">",
      "//",
      "</script>",
      "",
      "<script setup lang=\"ts\">",
      "definePageMeta({",
      "  layout: ${1|'default',false|},",
      "  name: '${2:${TM_FILENAME_BASE}}',",
      "})",
      "",
      "useHead({",
      "  title: '${3}',",
      "})",
      "</script>",
      "",
      "<template>",
      "  <UPage>",
      "    <UPageBody>",
      "      {{ \\$route.name }}",
      "    </UPageBody>",
      "  </UPage>",
      "</template>"
    ],
    "description": "Nuxt page template with script, setup script, and template sections"
  },
  "Nuxt Layout Template": {
    "scope": "vue",
    "prefix": "nuxt-layout",
    "body": [
      "<script lang=\"ts\">",
      "//",
      "</script>",
      "",
      "<script setup lang=\"ts\">",
      "defineOptions({",
      "  inheritAttrs: false,",
      "})",
      "</script>",
      "",
      "<template>",
      "  <UContainer as=\"main\">",
      "    <slot />",
      "  </UContainer>",
      "</template>"
    ],
    "description": "Nuxt layout template with script sections and container"
  },
  "Pinia Setup Store Boilerplate": {
    "scope": "typescript",
    "prefix": "pinia-setup",
    "body": [
      "export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', () => {",
      " $0",
      " return {}",
      "})",
      "",
      "if (import.meta.hot)",
      " import.meta.hot.accept(acceptHMRUpdate(use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store, import.meta.hot))",
      ""
    ],
    "description": "Bootstrap the code needed for a Vue.js Pinia Setup Store file"
  },
  "Composable Boilerplate": {
    "scope": "typescript",
    "prefix": "composable",
    "body": [
      "export function ${TM_FILENAME_BASE/^(.*)$/${1:/camelcase}/}() {",
      "  ${0:// [TODO] add code here}",
      "  return {}",
      "}",
      "",
    ]
  },
  "Vue Component with Filename": {
    "prefix": "vue-component",
    "scope": "vue",
    "body": [
      "<script lang=\"ts\">",
      "export interface Props { }",
      "",
      "export interface Emits { }",
      "</script>",
      "",
      "<script setup lang=\"ts\">",
      "defineOptions({",
      "  name: '${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}',",
      "  inheritAttrs: false,",
      "})",
      "",
      "defineProps<Props>()",
      "defineEmits<Emits>()",
      "</script>",
      "",
      "<template>",
      "  <div>",
      "    {{ \\$props }}",
      "  </div>",
      "</template>",
      "",
    ],
    "description": "Vue component with TypeScript, using filename as component name"
  }
}

https://code.visualstudio.com/docs/editor/userdefinedsnippets