release: 1.11.0

Author: junedchhipa

.eslintrc.js .eslintrc.cjs.eslintrc.js renamed to .eslintrc.cjs

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 demo/node_modules
+demo-ssr/node_modules
 
 # local env files
 .env.local
@@ -20,3 +21,12 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Test coverage
+coverage
+.nyc_output
+
+# Demo SSR
+demo-ssr/.nuxt
+demo-ssr/.output
+demo-ssr/dist

.gitignore

@@ -13,16 +13,20 @@
 
 <p align="center"><a href="https://apexcharts.com/vue-chart-demos/"><img src="https://apexcharts.com/media/apexcharts-banner.png"></a></p>
 
-## Download and Installation
+## Features
+
+- Reactive chart updates — change props and the chart re-renders automatically
+- **Tree-shaking** — import only the chart types and features you use via `vue3-apexcharts/core`
+- **Server-Side Rendering (SSR)** — render charts to HTML on the server with `<apexchart-server>` and hydrate on the client with `<apexchart-hydrate>`
+- Full TypeScript support
 
-##### Installing via npm
+## Download and Installation
 
 ```bash
-npm install --save apexcharts
-npm install --save vue3-apexcharts
+npm install apexcharts vue3-apexcharts
 ```
 
-If you're looking for Vue 2.x.x compatibile component, check-out <a href="https://github.com/apexcharts/vue-apexcharts">vue-apexcharts</a>
+If you're looking for Vue 2.x.x compatible component, check-out <a href="https://github.com/apexcharts/vue-apexcharts">vue-apexcharts</a>
 
 ## Usage
 
@@ -245,28 +249,190 @@ More info on the `.exec()` method can be found <a href="https://apexcharts.com/d
 
 All other methods of ApexCharts can be called the same way.
 
+## Tree-Shaking (Core Entry)
+
+The default entry (`vue3-apexcharts`) bundles the full ApexCharts library. If you want to reduce your bundle size by importing only the chart types and features you need, use the **core** entry point:
+
+```js
+import VueApexCharts from "vue3-apexcharts/core";
+
+// Import only the chart types you need
+import "apexcharts/bar";
+import "apexcharts/line";
+
+// Import only the features you need
+import "apexcharts/features/legend";
+import "apexcharts/features/toolbar";
+
+const app = createApp(App);
+app.use(VueApexCharts);
+```
+
+The core entry imports ApexCharts from `apexcharts/core`, which is the bare class with only tooltip included. You must explicitly import the chart types and optional features your app uses:
+
+**Chart types:** `apexcharts/line`, `apexcharts/bar`, `apexcharts/pie`, `apexcharts/heatmap`, `apexcharts/candlestick`, `apexcharts/radial`, etc.
+
+**Optional features:**
+| Import | Description |
+|--------|-------------|
+| `apexcharts/features/legend` | Chart legend |
+| `apexcharts/features/toolbar` | Toolbar (zoom, pan, download) |
+| `apexcharts/features/annotations` | X/Y-axis and point annotations |
+| `apexcharts/features/exports` | PNG/SVG/CSV export |
+| `apexcharts/features/keyboard` | Keyboard navigation & accessibility |
+
+> **Note:** Tree-shaking requires ApexCharts v5.8.1+.
+
+## Server-Side Rendering (SSR)
+
+Vue3-ApexCharts includes dedicated components for SSR that work with Nuxt 3 and other Vue SSR frameworks.
+
+> **Note:** SSR support requires ApexCharts v5.6.0+.
+
+### Nuxt 3 Setup
+
+Register the plugin so that components are available during both server and client render passes:
+
+```ts
+// plugins/apexcharts.ts
+import VueApexCharts from "vue3-apexcharts";
+
+export default defineNuxtPlugin({
+  name: "apexcharts",
+  parallel: true,
+  setup(nuxtApp) {
+    nuxtApp.vueApp.use(VueApexCharts);
+  },
+});
+```
+
+### Server-Side Rendering with `<apexchart-server>`
+
+Render charts to HTML on the server — the chart markup is included in the initial page load for better SEO and faster perceived performance:
+
+```vue
+<template>
+  <apexchart-server
+    type="bar"
+    :series="series"
+    :options="options"
+    :width="500"
+    :height="300"
+  />
+</template>
+
+<script setup>
+const series = [{ data: [30, 40, 35, 50, 49, 60, 70] }];
+const options = {
+  chart: { type: "bar" },
+  xaxis: { categories: ["A", "B", "C", "D", "E", "F", "G"] },
+};
+</script>
+```
+
+### SSR + Client Hydration
+
+For interactive charts, pair server rendering with client-side hydration. The chart is rendered on the server, then `<apexchart-hydrate>` finds all server-rendered charts on the page and attaches client-side interactivity (tooltips, animations, click handlers):
+
+```vue
+<template>
+  <apexchart-server
+    type="line"
+    :series="series"
+    :options="options"
+    :width="700"
+    :height="350"
+  />
+
+  <!-- Place once per page — hydrates all server-rendered charts -->
+  <apexchart-hydrate
+    :client-options="{
+      chart: { animations: { enabled: true } },
+    }"
+  />
+</template>
+
+<script setup>
+const series = [{ name: "Sales", data: [30, 40, 35, 50, 49, 60, 70] }];
+const options = {
+  chart: { type: "line" },
+  xaxis: { categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] },
+};
+</script>
+```
+
+### Client-Only Rendering (Traditional)
+
+For purely client-side rendering in Nuxt, wrap the standard component in `<ClientOnly>`:
+
+```vue
+<template>
+  <ClientOnly>
+    <apexchart
+      type="bar"
+      :series="series"
+      :options="options"
+      width="500"
+      height="300"
+    />
+  </ClientOnly>
+</template>
+```
+
+### SSR Component Reference
+
+#### `<apexchart-server>`
+
+| Prop          | Type          | Default  | Description                 |
+| ------------- | ------------- | -------- | --------------------------- |
+| **type**      | String        | `'line'` | Chart type                  |
+| **width**     | Number/String | `400`    | Chart width                 |
+| **height**    | Number/String | `300`    | Chart height                |
+| **series**    | Array         | `[]`     | Chart data series           |
+| **options**   | Object        | `{}`     | ApexCharts configuration    |
+| **className** | String        | `''`     | CSS class for the container |
+
+#### `<apexchart-hydrate>`
+
+| Prop              | Type   | Default                       | Description                                 |
+| ----------------- | ------ | ----------------------------- | ------------------------------------------- |
+| **clientOptions** | Object | `{}`                          | Client-side options merged during hydration |
+| **selector**      | String | `'[data-apexcharts-hydrate]'` | CSS selector for charts to hydrate          |
+
 ## Running the examples
 
 Basic Examples are included to show how to get started using ApexCharts with Vue 3 easily.
 
-To run the examples,
-
 ```bash
 cd demo
-yarn install
-yarn start
+npm install
+npm run dev
+```
+
+An SSR demo using Nuxt 3 is also available:
+
+```bash
+cd demo-ssr
+npm install
+npm run dev
 ```
 
 ## Development
 
 #### Install dependencies
 
 ```bash
-yarn install
+npm install
 ```
 
 #### Bundling
 
 ```bash
-yarn build
+npm run build
+```
+
+#### Running tests
+
+```bash
+npm test
 ```

README.md

@@ -0,0 +1,23 @@
+# Nuxt dev/build outputs
+.output
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example