diff --git a/README.md b/README.md
index 43a7ba9..24d10d9 100644
--- a/README.md
+++ b/README.md
@@ -35,12 +35,14 @@ You can change the chart settings of your app from `config/apexcharts.php` file
## Usage
-First of all, create an instance of the `Chart` class and set the data and options according to your needs.
+### Blade
+
+Create an instance of the `Chart` class and set the data and options according to your needs.
```php
use Akaunting\Apexcharts\Chart;
-...
+// ...
$chart = (new Chart)->setType('donut')
->setWidth('100%')
@@ -52,11 +54,10 @@ $chart = (new Chart)->setType('donut')
Then, include the JavaScript (on every page using charts).
```html
-...
+
-
- ...
+
@apexchartsScripts
@@ -65,11 +66,89 @@ Then, include the JavaScript (on every page using charts).
Finally, call the `container` and `script` method wherever you want to display the chart.
```php
+
+
{!! $chart->container() !!}
{!! $chart->script() !!}
```
+### Vue
+
+If you're using Vue and Inertia, install Apexcharts and their Vue 3 adapter:
+
+```bash
+npm install --save apexcharts
+npm install --save vue3-apexcharts
+```
+
+```js
+// resources/js/app.js
+
+import VueApexCharts from 'vue3-apexcharts';
+
+createInertiaApp({
+ // ...
+ setup({el, App, props, plugin}) {
+ return createApp({ render: () => h(App, props) })
+ .use(VueApexCharts)
+ .mount(el);
+ },
+});
+```
+
+Then, create a simple `chart.vue` component:
+
+```vue
+
+
+
+
+
+
+
+```
+
+Create an instance of `Chart` and call `toVue()` before passing it to your page:
+
+```php
+Route::get('dashboard', function () {
+ $chart = (new Chart)->setType('...');
+
+ return inertia('dashboard', [
+ 'chart' => $chart->toVue(),
+ ]);
+});
+```
+
+Finally, render the chart:
+
+```vue
+
+
+
+
+
+
+
+```
+
## Testing
```bash