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

@@ -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',
  },
  },

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";
+ }
+ }
+ }
+ }
+}
+```