Skip to content

Commit

Permalink
Add npm install docs
Browse files Browse the repository at this point in the history
  • Loading branch information
stevebauman committed Apr 2, 2024
1 parent 67e36b2 commit 506e3e6
Showing 1 changed file with 26 additions and 4 deletions.
30 changes: 26 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,32 @@ Finally, call the `container` and `script` method wherever you want to display t

### Vue

If you're using Vue and Inertia, create a simple `chart.vue` component:
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
<!-- chart.vue -->
<!-- components/chart.vue -->
<template>
<apexchart
Expand All @@ -97,7 +119,7 @@ defineProps({
</script>
```

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

```php
Route::get('dashboard', function () {
Expand All @@ -112,7 +134,7 @@ Route::get('dashboard', function () {
Finally, render the chart:

```vue
<!-- dashboard.vue -->
<!-- pages/dashboard.vue -->
<template>
<Chart :chart="chart" />
Expand Down

0 comments on commit 506e3e6

Please sign in to comment.