From f005cbb95ebc67772581f88612ca60ab49587f06 Mon Sep 17 00:00:00 2001
From: MadDog4533 <koreyshenefield@gmail.com>
Date: Mon, 24 Jul 2023 11:37:58 -0600
Subject: [PATCH] docs(installation): add documentation for intellisense on SFC
 objects (#382)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../1.getting-started/2.installation.md       | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
index e0ef9221..7291c839 100644
--- a/docs/content/1.getting-started/2.installation.md
+++ b/docs/content/1.getting-started/2.installation.md
@@ -73,16 +73,35 @@ If you do so, you'll need to add the following to your `.vscode/settings.json`:
 }
 ```
 
-Also, the extension won't work when writing classes in your `app.config.ts` by default. You can add the following to your `.vscode/settings.json` to fix this:
+Note, the extension won't work when writing classes in your `app.config.ts` by default.
+
+Also, you might want IntelliSense on objects in your SFC by prefixing with `/*ui*/`.
+
+To enable these two features, you can add the following to your `.vscode/settings.json`:
 
 ```json [.vscode/settings.json]
 {
   "tailwindCSS.experimental.classRegex": [
     ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"]
+    ["/\\*ui\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"],
   ]
 }
 ```
 
+An example SFC using IntelliSense (note the `/*ui*/` prefix, also works with `ref()`):
+
+```vue [example.vue]
+<template>
+  <UCard :ui="ui" />
+</template>
+
+<script setup>
+const ui = /*ui*/ {
+  background: 'bg-white dark:bg-slate-900'
+}
+</script>
+```
+
 You can also add the following to your `.vscode/settings.json` to enable IntelliSense when using the `ui` prop:
 
 ```json [.vscode/settings.json]