Skip to content

Commit 506e3e6

Browse files
committed
Add npm install docs
1 parent 67e36b2 commit 506e3e6

File tree

1 file changed

+26
-4
lines changed

1 file changed

+26
-4
lines changed

README.md

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,32 @@ Finally, call the `container` and `script` method wherever you want to display t
7575

7676
### Vue
7777

78-
If you're using Vue and Inertia, create a simple `chart.vue` component:
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:
79101

80102
```vue
81-
<!-- chart.vue -->
103+
<!-- components/chart.vue -->
82104
83105
<template>
84106
<apexchart
@@ -97,7 +119,7 @@ defineProps({
97119
</script>
98120
```
99121

100-
Then, create an instance of `Chart` and call `toVue()` when passing it to your page:
122+
Create an instance of `Chart` and call `toVue()` before passing it to your page:
101123

102124
```php
103125
Route::get('dashboard', function () {
@@ -112,7 +134,7 @@ Route::get('dashboard', function () {
112134
Finally, render the chart:
113135

114136
```vue
115-
<!-- dashboard.vue -->
137+
<!-- pages/dashboard.vue -->
116138
117139
<template>
118140
<Chart :chart="chart" />

0 commit comments

Comments
 (0)