nuxt-plotly module is thin Nuxt3 wrapper for plotly.js
npm install nuxt-plotlyš nuxt-plotly module is thin Nuxt3 wrapper for plotly.js
- š Online playground
- š Plotly Documentation
- š All plotly.js methods and events
- š¾ Auto redraw on screensize changes and props update
- š Data reactivity
- šļø TypeScript support
1. Add nuxt-plotly dependency to your project
``bash`
npx nuxi@latest module add nuxt-plotly
2. Add nuxt-plotly to the modules section of nuxt.config.ts
`js
// nuxt.config.js
export default defineNuxtConfig({
/**
* Add nuxt-plotly module
*/
modules: ["nuxt-plotly"],
/**
* Add nuxt-plotly module with options
* Set the inject option to true to use plotly function via $plotly
*/
// modules: [["nuxt-plotly", { inject: true }]],
});
`
3. Add plotly.js-dist-min to the vite.optimizeDeps.include section of nuxt.config.ts
`js`
// nuxt.config.js
export default defineNuxtConfig({
vite: {
optimizeDeps: {
include: ["plotly.js-dist-min"],
},
},
});
That's it! You can now use Nuxt Plotly Module in your Nuxt app āØ
There are two ways to use the nuxt-plotly module on the client-side in Nuxt3:
1. Wrap the component with the tag.
`html`
:layout="pieChart.layout"
:config="pieChart.config"
style="width: 100%"
>
2. Create a file with the .client.vue extension, for example, PieChart.client.vue and then you can use the component without the tag.
You can access Plotly events using the @on-ready directive to receive the PlotlyHTMLElement object from the component.
- HTML template example
`html`
:layout="layout"
:config="config"
@on-ready="myChartOnReady"
>
- After receiving the PlotlyHTMLElement, you can access Plotly events
`typescript
function myChartOnReady(plotlyHTMLElement: NuxtPlotlyHTMLElement) {
console.log({ plotlyHTMLElement });
plotlyHTMLElement.on?.("plotly_afterplot", function () {
console.log("done plotting");
});
plotlyHTMLElement.on?.("plotly_click", function () {
alert("You clicked this Plotly chart!");
});
}
`
To use the Plotly Function in your nuxt project, follow these steps:
- Step 1: Set the inject option to true in the nuxt-plotly module configuration of your nuxt.config.ts file.
`js`
// nuxt.config.js
export default defineNuxtConfig({
modules: [["nuxt-plotly", { inject: true }]],
});
- Step 2: After setting the inject option to true, you can now access the plotly function via $plotly in your nuxt project.
`ts
// app.vue
const { $plotly } = useNuxtApp();
/**
* Show all plotly functions
*/
console.log($plotly);
/**
* Use downloadImage function
*/
$plotly.downloadImage(plotlyHTMLElement as HTMLElement, {
format: "png",
width: 800,
height: 600,
filename: "newplot",
});
`
These type aliases simplify the usage of Plotly types in your Nuxt project:
`typescript
/**
* Represents an array of Plotly data objects.
*/
export type NuxtPlotlyData = Array
/**
* Represents a partial configuration object for Plotly charts.
*/
export type NuxtPlotlyConfig = Partial
/**
* Represents a partial layout object for Plotly charts.
*/
export type NuxtPlotlyLayout = Partial
/**
* Represents a partial HTML element that holds a rendered Plotly chart.
*/
export type NuxtPlotlyHTMLElement = Partial
`
With these type aliases, you can easily work with Plotly data, configurations, layouts, and HTML elements in your Nuxt application, enhancing your experience when creating interactive charts and visualizations.
`bashInstall dependencies
npm install
Copyright Ā© 2023 Supanut Dokmaithong.
This project is MIT licensed.