File tree Expand file tree Collapse file tree 1 file changed +26
-4
lines changed Expand file tree Collapse file tree 1 file changed +26
-4
lines changed Original file line number Diff line number Diff line change @@ -75,10 +75,32 @@ Finally, call the `container` and `script` method wherever you want to display t
75
75
76
76
### Vue
77
77
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:
79
101
80
102
``` vue
81
- <!-- chart.vue -->
103
+ <!-- components/ chart.vue -->
82
104
83
105
<template>
84
106
<apexchart
@@ -97,7 +119,7 @@ defineProps({
97
119
</script>
98
120
```
99
121
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:
101
123
102
124
``` php
103
125
Route::get('dashboard', function () {
@@ -112,7 +134,7 @@ Route::get('dashboard', function () {
112
134
Finally, render the chart:
113
135
114
136
``` vue
115
- <!-- dashboard.vue -->
137
+ <!-- pages/ dashboard.vue -->
116
138
117
139
<template>
118
140
<Chart :chart="chart" />
You can’t perform that action at this time.
0 commit comments