docs: use tab

Author: sxzz

docs/guide/getting-started.md

@@ -32,7 +32,9 @@ pnpm add -D unplugin-vue-macros
 
 ::::
 
-#### Vite (first-class support)
+:::: code-group
+
+::: code-group-item Vite (first-class support)
 
 ```ts
 // vite.config.ts
@@ -52,7 +54,9 @@ export default defineConfig({
 })
 ```
 
-#### Rollup (first-class support)
+:::
+
+::: code-group-item Rollup (first-class support)
 
 ```ts
 // rollup.config.js
@@ -71,7 +75,9 @@ export default {
 }
 ```
 
-#### esbuild
+:::
+
+::: code-group-item esbuild
 
 ```js
 // esbuild.config.js
@@ -89,7 +95,9 @@ build({
 })
 ```
 
-#### Webpack
+:::
+
+::: code-group-item Webpack
 
 ```js
 // webpack.config.js
@@ -106,6 +114,10 @@ module.exports = {
 }
 ```
 
+:::
+
+::::
+
 ## TypeScript Support
 
 ```json

docs/macros/setup-sfc.md

@@ -20,9 +20,11 @@ If you're using `setupSFC`, then `defineRender` cannot be disabled.
 
 ## Setup
 
-Using Vite as an example:
+:::: code-group
 
-```ts{7,9}
+::: code-group-item Vite
+
+```ts{7-11}
 // vite.config.ts
 import VueMacros from 'unplugin-vue-macros/vite'
 import Vue from '@vitejs/plugin-vue'
@@ -38,6 +40,44 @@ export default defineConfig({
 })
 ```
 
+:::
+
+::: code-group-item Rollup
+
+```ts{6-13}
+import Vue from 'unplugin-vue/rollup'
+import VueMacros from 'unplugin-vue-macros/rollup'
+
+export default defineConfig({
+  plugins: [
+    VueMacros({
+      plugins: {
+        vue: Vue({
+          include: [/\.vue$/, /setup\.[cm]?[jt]sx?$/],
+          //                   ⬆️ setupSFC pattern need to be added
+        }),
+      },
+    }),
+  ],
+})
+```
+
+:::
+
+::: code-group-item 🚧 esbuild
+
+:construction:
+
+:::
+
+::: code-group-item 🚧 Webpack
+
+:construction:
+
+:::
+
+::::
+
 ## Basic Usage
 
 ```tsx