refactor: update docs

Author: sxzz

docs/.vitepress/components/WarnBadge.vue

@@ -0,0 +1,5 @@
+<template>
+  <span text-yellow-600 dark:text-yellow text-xs border p-1 rounded>
+    ⚠️ <slot />
+  </span>
+</template>

docs/.vitepress/theme/index.ts

@@ -1,12 +1,14 @@
 import { h } from 'vue'
 import Theme from 'vitepress/theme'
 import HomePage from '../components/HomePage.vue'
+import WarnBadge from '../components/WarnBadge.vue'
 import CodeGroup from './components/CodeGroup.vue'
-import CodeGroupItemVue from './components/CodeGroupItem.vue'
-import type { EnhanceAppContext } from 'vitepress'
+import CodeGroupItem from './components/CodeGroupItem.vue'
 import 'uno.css'
 import './style.css'
 
+import type { EnhanceAppContext } from 'vitepress'
+
 export default {
   ...Theme,
   Layout() {
@@ -16,6 +18,7 @@ export default {
   },
   enhanceApp({ app }: EnhanceAppContext) {
     app.component('CodeGroup', CodeGroup)
-    app.component('CodeGroupItem', CodeGroupItemVue)
+    app.component('CodeGroupItem', CodeGroupItem)
+    app.component('WarnBadge', WarnBadge)
   },
 }

docs/guide/getting-started.md

@@ -1,5 +1,13 @@
 # Getting Started
 
+## Requirements
+
+- Developers who are familiar with Vue.
+- Vue 2.7 or Vue >= 3.0.
+  - Some features need Vue >= 3.2.25.
+- VSCode with Volar.
+  - ❌ WebStorm is not supported.
+
 ## Bundler integrations
 
 ### Installation
@@ -120,6 +128,10 @@ module.exports = {
 
 ## TypeScript Support
 
+:::: code-group
+
+::: code-group-item Vue 3
+
 ```json
 // tsconfig.json
 {
@@ -130,6 +142,24 @@ module.exports = {
 }
 ```
 
+:::
+
+::: code-group-item Vue 2
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    // ...
+    "types": ["unplugin-vue-macros/vue2-macros-global" /* ... */]
+  }
+}
+```
+
+:::
+
+::::
+
 ## Volar Support
 
 For detailed configuration, please refer to the description of the specific macro.
@@ -152,6 +182,6 @@ npm i -D @vue-macros/volar
 }
 ```
 
-:tada: Congratulations! You have successfully set up unplugin-vue-macros.
+:tada: Congratulations! You have successfully set up `unplugin-vue-macros`.
 
 To learn more about the macros, please visit [All Macros](/macros/) :laughing:.

docs/index.md

@@ -20,7 +20,7 @@ features:
     details: Explore and extend more macros and syntax sugar to Vue.
   - icon: 💚
     title: Out-of-the-box and good compatibility
-    details: Supports both Vue 2 and Vue 3 out-of-the-box.
+    details: Supports both Vue 2.7 and Vue 3 out-of-the-box.
   - icon: 🦾
     title: Type Safe
     details: Full TypeScript and Volar support.

docs/macros/index.md

@@ -10,5 +10,5 @@ Please make sure `unplugin-vue-macros` is set up correctly. If you haven't yet,
 - [shortEmits](/macros/short-emits)
 - [shortVmodel](/macros/short-vmodel)
 - [hoistStatic](/macros/hoist-static)
-- [setupComponent](/macros/setup-component) <span text-yellow-600 dark:text-yellow text-xs border p-1 rounded>:warning: Experimental</span>
-- [setupSFC](/macros/setup-sfc) <span text-yellow-600 dark:text-yellow text-xs border p-1 rounded>:warning: Experimental</span>
+- [setupComponent](/macros/setup-component) <WarnBadge>Experimental</WarnBadge>
+- [setupSFC](/macros/setup-sfc) <WarnBadge>Experimental</WarnBadge>

docs/macros/setup-component.md

@@ -1,8 +1,8 @@
-# setupComponent
+# setupComponent <WarnBadge>Experimental, use at your risk</WarnBadge>
 
-::: warning
+::: tip
 
-Under experimental, use at your risk!
+If you're using `setupComponent`, then `defineRender` cannot be disabled.
 
 :::
 

docs/macros/setup-sfc.md

@@ -1,10 +1,4 @@
-# setupSFC
-
-::: warning
-
-Under experimental, use at your risk!
-
-:::
+# setupSFC <WarnBadge>Experimental, use at your risk</WarnBadge>
 
 ::: tip