From eecc1edfa17f8f8d0ac6ef157b9b9134e09b7aa0 Mon Sep 17 00:00:00 2001
From: typicode <typicode@gmail.com>
Date: Sat, 4 May 2024 22:26:21 +0200
Subject: [PATCH] update docs

---
 README.md                                        |  2 --
 docs/src/content/docs/integration/frameworks.mdx | 16 +++++++++++-----
 docs/src/content/docs/intro.mdx                  |  6 ++++--
 src/bin.ts                                       | 14 +++++++++++---
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index ed7e5bd..62f513b 100644
--- a/README.md
+++ b/README.md
@@ -43,8 +43,6 @@ https://typicode.github.io/mistcss
 
 ## Supports
 
-Bring your favorite tools:
-
 - [Next.js](https://nextjs.org/)
 - [Remix](https://remix.run/)
 - [React](https://react.dev/)
diff --git a/docs/src/content/docs/integration/frameworks.mdx b/docs/src/content/docs/integration/frameworks.mdx
index c1776dd..1f47a44 100644
--- a/docs/src/content/docs/integration/frameworks.mdx
+++ b/docs/src/content/docs/integration/frameworks.mdx
@@ -2,22 +2,28 @@
 title: Frameworks
 ---
 
-## React
-
 By default, `mistcss` will generate React components that you can use in Next.js or Remix
 
+## React
+
 ```sh
 mistcss ./components
 ```
 
-## Hono
+## Vue
 
 ```sh
-mistcss ./components --target=hono
+mistcss ./components --target=vue
 ```
 
 ## Astro
 
 ```sh
 mistcss ./components --target=astro
-```
\ No newline at end of file
+```
+
+## Hono
+
+```sh
+mistcss ./components --target=hono
+```
diff --git a/docs/src/content/docs/intro.mdx b/docs/src/content/docs/intro.mdx
index d4440f8..bb714be 100644
--- a/docs/src/content/docs/intro.mdx
+++ b/docs/src/content/docs/intro.mdx
@@ -14,7 +14,7 @@ Unlike other tools, __MistCSS doesn't modify your CSS__, leaving you free to __u
 
 As a consequence, __you don't have to learn a new API__ to start using it nor have to install a code editor extension. __It's just CSS__.
 
-Bring your favorite tools:
+Supports:
 
 - [Next.js](https://nextjs.org/)
 - [Remix](https://remix.run/)
@@ -22,4 +22,6 @@ Bring your favorite tools:
 - [Vue](https://vuejs.org)
 - [Astro](https://astro.build/)
 - [Hono](https://hono.dev/)
-- [Tailwind CSS](https://tailwindcss.com/)
\ No newline at end of file
+- [Tailwind CSS](https://tailwindcss.com/)
+
+__Bonus__: if you need to switch from one framework to another, you won't have to rewrite your components. Simply change MistCSS compilation target.
\ No newline at end of file
diff --git a/src/bin.ts b/src/bin.ts
index 30443f3..32f17f5 100755
--- a/src/bin.ts
+++ b/src/bin.ts
@@ -10,9 +10,10 @@ import { globby } from 'globby'
 import { parse } from './parser.js'
 import { render as reactRender } from './renderers/react.js'
 import { render as astroRender } from './renderers/astro.js'
+import { render as vueRender } from './renderers/vue.js'
 
 type Extension = '.tsx' | '.astro'
-type Target = 'react' | 'hono' | 'astro';
+type Target = 'react' | 'hono' | 'astro' | 'vue';
 
 function createFile(mist: string, target: Target, ext: Extension) {
   try {
@@ -30,6 +31,9 @@ function createFile(mist: string, target: Target, ext: Extension) {
         case 'astro':
           result = astroRender(name, data[0])
           break
+        case 'vue':
+          result = vueRender(name, data[0])
+          break
       }
       fs.writeFileSync(mist.replace(/\.css$/, ext), result)
     }
@@ -46,7 +50,7 @@ function createFile(mist: string, target: Target, ext: Extension) {
 function usage() {
   console.log(`Usage: mistcss <directory> [options]
   --watch, -w    Watch for changes
-  --target, -t   Render target (react, hono, astro) [default: react]
+  --target, -t   Render target (react, vue, astro, hono) [default: react]
 `)
 }
 
@@ -81,7 +85,7 @@ if (!(await fsPromises.stat(dir)).isDirectory()) {
 }
 
 const { target } = values;
-if (target !== 'react' && target !== 'hono' && target !== 'astro') {
+if (target !== 'react' && target !== 'hono' && target !== 'astro' && target !== 'vue') {
   console.error('Invalid render option')
   usage()
   process.exit(1)
@@ -102,6 +106,10 @@ switch (target) {
     ext = '.astro'
     console.log('Rendering Astro components')
     break
+  case 'vue':
+    ext = '.tsx'
+    console.log('Rendering Vue components')
+    break
   default:
     console.error('Invalid target option')
     usage()