From 943ccfc9ba0b3b85d05dfc8b6f9e220db8ebc81e Mon Sep 17 00:00:00 2001
From: Mayvis <kevin73911@gmail.com>
Date: Thu, 7 Apr 2022 22:03:16 +0800
Subject: [PATCH] add setup first snippet and update README

---
 README.md         | 34 ++++++++++++++++++----------------
 snippets/vue.json | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index f440a8f..42e7a0f 100644
--- a/README.md
+++ b/README.md
@@ -32,22 +32,24 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
 
 ### Vue
 
-| Snippet            | Purpose                                                      |
-| ------------------ | ------------------------------------------------------------ |
-| `vbase`            | Single file component base with SCSS                         |
-| `vbase-3`          | Single File component Composition API with SCSS              |
-| `vbase-3-setup`    | Single File component setup Composition API with SCSS        |
-| `vbase-3-reactive` | Single File component Composition API with Reactive and SCSS |
-| `vbase-css`        | Single file component base with CSS                          |
-| `vbase-pcss`       | Single file component base with PostCSS                      |
-| `vbase-styl`       | Single file component base with Stylus                       |
-| `vbase-ts`         | Single file component base with Typescript                   |
-| `vbase-ts-class`   | Single file component base with Typescript Class Format      |
-| `vbase-3-ts`       | Single File component Composition API with Typescript        |
-| `vbase-3-ts-setup` | Single File component setup Composition API with Typescript  |
-| `vbase-ns`         | Single file component with no styles                         |
-| `vbase-sass`       | Single file component base with SASS                         |
-| `vbase-less`       | Single file component base with LESS                         |
+| Snippet                  | Purpose                                                           |
+| ------------------------ | ----------------------------------------------------------------- |
+| `vbase`                  | Single file component base with SCSS                              |
+| `vbase-3`                | Single File component Composition API with SCSS                   |
+| `vbase-3-setup`          | Single File component setup Composition API with SCSS             |
+| `vbase-3-setup-first`    | Single File component setup first Composition API with SCSS       |
+| `vbase-3-reactive`       | Single File component Composition API with Reactive and SCSS      |
+| `vbase-css`              | Single file component base with CSS                               |
+| `vbase-pcss`             | Single file component base with PostCSS                           |
+| `vbase-styl`             | Single file component base with Stylus                            |
+| `vbase-ts`               | Single file component base with Typescript                        |
+| `vbase-ts-class`         | Single file component base with Typescript Class Format           |
+| `vbase-3-ts`             | Single File component Composition API with Typescript             |
+| `vbase-3-ts-setup`       | Single File component setup Composition API with Typescript       |
+| `vbase-3-ts-setup-first` | Single File component setup first Composition API with Typescript |
+| `vbase-ns`               | Single file component with no styles                              |
+| `vbase-sass`             | Single file component base with SASS                              |
+| `vbase-less`             | Single file component base with LESS                              |
 
 ### Template
 
diff --git a/snippets/vue.json b/snippets/vue.json
index 578866c..310e22f 100644
--- a/snippets/vue.json
+++ b/snippets/vue.json
@@ -209,6 +209,25 @@
     ],
     "description": "Base for Vue File Setup Composition API with SCSS"
   },
+  "Vue Single File Component Setup First Composition API": {
+    "prefix": "vbase-3-setup-first",
+    "body": [
+      "<script setup>",
+      "",
+      "</script>",
+      "",
+      "<template>",
+      "\t<div>",
+      "",
+      "\t</div>",
+      "</template>",
+      "",
+      "<style lang=\"scss\" scoped>",
+      "",
+      "</style>"
+    ],
+    "description": "Base for Vue File Setup First Composition API with SCSS"
+  },
   "Vue Single File Component Composition API Reactive": {
     "prefix": "vbase-3-reactive",
     "body": [
@@ -285,6 +304,25 @@
     ],
     "description": "Base for Vue File Setup Composition API - Typescript"
   },
+  "Vue Single File Component Setup First Composition API with Typescript": {
+    "prefix": "vbase-3-ts-setup-first",
+    "body": [
+      "<script setup lang=\"ts\">",
+      "",
+      "</script>",
+      "",
+      "<template>",
+      "\t<div>",
+      "",
+      "\t</div>",
+      "</template>",
+      "",
+      "<style scoped>",
+      "",
+      "</style>"
+    ],
+    "description": "Base for Vue File Setup First Composition API - Typescript"
+  },
   "Vue Single File Component with Class based Typescript format": {
     "prefix": "vbase-ts-class",
     "body": [