From a9d936807ac4e8de9f1928682a8319705a801cbe Mon Sep 17 00:00:00 2001
From: Levent Anil Ozen <leventanilozen@gmail.com>
Date: Fri, 1 Jul 2022 18:25:15 +0300
Subject: [PATCH] docs: using baklava in vue doc added (#148)

* docs: using baklava in vue doc added

* docs: update release url and fix cosmetics at vue doc

* docs: renaming trendyol-js -> trendyol at using vue doc

* docs: change release using vue doc
---
 .storybook/preview.js                 |   2 +-
 docs/using-baklava-in-vue.stories.mdx | 100 ++++++++++++++++++++++++++
 2 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 docs/using-baklava-in-vue.stories.mdx

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 21d500a3..86603473 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -16,7 +16,7 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: ['Documentation', ['Welcome', '*'], 'Components', 'Design System'],
+      order: ['Documentation', ['Welcome', '*'], 'Frameworks', 'Components', 'Design System'],
       locales: 'en-US',
     },
   },
diff --git a/docs/using-baklava-in-vue.stories.mdx b/docs/using-baklava-in-vue.stories.mdx
new file mode 100644
index 00000000..5e10c198
--- /dev/null
+++ b/docs/using-baklava-in-vue.stories.mdx
@@ -0,0 +1,100 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta
+  title="Frameworks/Vue"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+# Using Baklava in Vue
+
+Vue is mostly [compatible](https://custom-elements-everywhere.com/#vue) with custom elements.
+
+## Installation
+
+To add Baklava in your app, you can either import it via CDN or npm package. But one way or another, you should tell Vue to ignore custom elements.
+
+To make the rule more generic, easiest way is ignoring the elements start with `bl-` tag. Thanks to that, every baklava element will be ignored by the Vue.
+
+### Via CDN
+
+To be able to use Baklava via CDN, you should add our default.css and baklava.js at head tag in your index.html file.
+
+> Baklava is currently in beta version. So, if you want to keep updated for new changes, you can add `@beta` tag like the example below.
+  However, you can simply use any version you want by adding the version number.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/themes/default.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta"></script>
+```
+
+### Via NPM
+
+To be able to use Baklava via npm, run ```npm install @trendyol/baklava```
+then,
+
+```js
+@import "@trendyol/baklava/dist/themes/default.css";
+import { setIconPath } from '@trendyol/baklava'
+setIconPath('https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/assets')
+```
+
+#### Vue2
+
+If you use Vue2, you should add ```Vue.config.ignoredElements = [/^bl-/]``` in your main.js.
+
+#### Vue3
+
+If you use Vue3, you can add this
+  ```js
+  app.config.compilerOptions.isCustomElement = tag => tag.startsWith('bl-');
+  ```
+  in your main.js before Vue mounts the app.
+Also, you can add ignore rule as compiler options to your webpack or vite.
+
+  ```js
+  isCustomElement: tag => tag.startsWith('bl-')
+  ```
+  For Vite:
+
+  ```js
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: tag => tag.startsWith('bl-')
+        }
+      }
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+
+  ```
+
+  For Webpack with `vue-loader`:
+
+  ```js
+  {
+  test: /\.vue$/,
+  use: {
+    loader: "vue-loader",
+    options: {
+      compilerOptions: {
+        isCustomElement: tag => {
+          return tag === "custom";
+        }
+      }
+    }
+  }
+}
+```
\ No newline at end of file