Skip to content

Commit af85495

Browse files
denisdulicidenisdulici
authored
Merge pull request #11 from stevebauman/patch-3
Add Vue usage docs
2 parents ffaf4de + 506e3e6 commit af85495

File tree

1 file changed

+84
-5
lines changed

1 file changed

+84
-5
lines changed

‎README.md

Lines changed: 84 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,14 @@ You can change the chart settings of your app from `config/apexcharts.php` file
3535

3636
## Usage
3737

38-
First of all, create an instance of the `Chart` class and set the data and options according to your needs.
38+
### Blade
39+
40+
Create an instance of the `Chart` class and set the data and options according to your needs.
3941

4042
```php
4143
use Akaunting\Apexcharts\Chart;
4244

43-
...
45+
// ...
4446

4547
$chart = (new Chart)->setType('donut')
4648
->setWidth('100%')
@@ -52,11 +54,10 @@ $chart = (new Chart)->setType('donut')
5254
Then, include the JavaScript (on every page using charts).
5355

5456
```html
55-
...
57+
<!-- layout.blade.php -->
5658

57-
</head>
5859
<body>
59-
...
60+
<!-- ... -->
6061

6162
@apexchartsScripts
6263
</body>
@@ -65,11 +66,89 @@ Then, include the JavaScript (on every page using charts).
6566
Finally, call the `container` and `script` method wherever you want to display the chart.
6667

6768
```php
69+
<!-- dashboard.blade.php -->
70+
6871
{!! $chart->container() !!}
6972

7073
{!! $chart->script() !!}
7174
```
7275

76+
### Vue
77+
78+
If you're using Vue and Inertia, install Apexcharts and their Vue 3 adapter:
79+
80+
```bash
81+
npm install --save apexcharts
82+
npm install --save vue3-apexcharts
83+
```
84+
85+
```js
86+
// resources/js/app.js
87+
88+
import VueApexCharts from 'vue3-apexcharts';
89+
90+
createInertiaApp({
91+
// ...
92+
setup({el, App, props, plugin}) {
93+
return createApp({ render: () => h(App, props) })
94+
.use(VueApexCharts)
95+
.mount(el);
96+
},
97+
});
98+
```
99+
100+
Then, create a simple `chart.vue` component:
101+
102+
```vue
103+
<!-- components/chart.vue -->
104+
105+
<template>
106+
<apexchart
107+
:type="chart.type"
108+
:width="chart.width"
109+
:height="chart.height"
110+
:series="chart.series"
111+
:options="chart.options"
112+
/>
113+
</template>
114+
115+
<script setup>
116+
defineProps({
117+
chart: Object,
118+
});
119+
</script>
120+
```
121+
122+
Create an instance of `Chart` and call `toVue()` before passing it to your page:
123+
124+
```php
125+
Route::get('dashboard', function () {
126+
$chart = (new Chart)->setType('...');
127+
128+
return inertia('dashboard', [
129+
'chart' => $chart->toVue(),
130+
]);
131+
});
132+
```
133+
134+
Finally, render the chart:
135+
136+
```vue
137+
<!-- pages/dashboard.vue -->
138+
139+
<template>
140+
<Chart :chart="chart" />
141+
</template>
142+
143+
<script setup>
144+
import Chart from './components/chart.vue';
145+
146+
defineProps({
147+
chart: Object,
148+
});
149+
</script>
150+
```
151+
73152
## Testing
74153

75154
```bash

0 commit comments

Comments
 (0)