-
Notifications
You must be signed in to change notification settings - Fork 112
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
a335d17
commit a9d9368
Showing
2 changed files
with
101 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"; | ||
} | ||
} | ||
} | ||
} | ||
} | ||
``` |