From 2ceff248e6fce489213e3e0ba975585f13f57d05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oktay=20=C5=9Eenkan?= <oktay.senkan@gmail.com>
Date: Sun, 6 Oct 2024 03:08:07 +0300
Subject: [PATCH] docs(docs): add installation doc for vue apps

---
 apps/docs/pages/installation/vue.mdx | 85 ++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 apps/docs/pages/installation/vue.mdx

diff --git a/apps/docs/pages/installation/vue.mdx b/apps/docs/pages/installation/vue.mdx
new file mode 100644
index 0000000..2420e99
--- /dev/null
+++ b/apps/docs/pages/installation/vue.mdx
@@ -0,0 +1,85 @@
+import { Steps, Callout } from "nextra/components";
+
+# Install Monicon with Vue
+
+Setting up Monicon with Vue is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your Vue project.
+
+<Steps>
+## Install
+
+First, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command.
+
+```sh npm2yarn
+npm i @monicon/vue @monicon/vite
+```
+
+Next, install the development dependency @iconify/json for icon sets. This package provides a comprehensive collection of icons that you can easily integrate into your project.
+
+```sh npm2yarn
+npm i -D @iconify/json
+
+# or specific icon sets
+npm i -D @iconify-json/mdi @iconify-json/feather
+```
+
+## Configure Vite
+
+Now that the dependencies are installed, you’ll need to configure Vite to use Monicon.
+
+```tsx filename="vite.config.ts"
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { monicon } from "@monicon/vite";
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    monicon({
+      icons: [
+        "mdi:home",
+        "feather:activity",
+        "logos:active-campaign",
+      ],
+    }),
+  ],
+});
+```
+
+<Callout>
+The `icons` array in the `monicon` plugin configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed. For a complete list of available icon sets, refer to the [Icones](https://icones.js.org/) website.
+</Callout>
+
+
+## Global Import
+
+If you want to use Monicon globally in your Vue project, add the following code to your main.ts file.
+
+```ts filename="main.ts"
+import Monicon from "@monicon/vue";
+
+const app = createApp(App);
+
+app.use(Monicon);
+```
+
+## Usage
+
+If you prefer to use Monicon in specific components, you can import the Monicon component as needed.
+
+```vue filename="src/App.vue"
+<script setup lang="ts">
+// If you've added app.use(Monicon) in main.ts, you don't need to import Monicon here, also you can use the lower cased `monicon` tag
+import { Monicon } from "@monicon/vue";
+</script>
+
+<template>
+    <Monicon name="mdi:home" />
+    <Monicon name="logos:active-campaign" :size="30" />
+    <Monicon name="feather:activity" color="red" />
+</template>
+```
+
+## Next Steps
+
+You’ve successfully set up Monicon! You can now explore more icon sets and customize your usage further.
+</Steps>
\ No newline at end of file