How to use Plotly.js in Nuxt3 in 5 min!

Nuxt Plotly Module (nuxt-plotly - npm)

:bar_chart: nuxt-plotly module is thin Nuxt3 wrapper for [plotly.js]


  • :sparkler:   All plotly.js methods and events
  • :japan:   Auto redraw on screensize changes and props update
  • :rocket:   Data reactivity
  • :desert_island:   TypeScript support

Require client-side

There are two ways to use the nuxt-plotly module on the client-side in Nuxt3:

  1. Wrap the component with the <client-only> tag.
    style="width: 100%"
  1. Create a file with the .client.vue extension, for example, PlotlyPieChart.client.vue and then you can use the component without the <client-only> tag.

Quick Setup

  1. Add nuxt-plotly dependency to your project
# Using pnpm
pnpm add -D nuxt-plotly

# Using yarn
yarn add --dev nuxt-plotly

# Using npm
npm install --save-dev nuxt-plotly
  1. Add nuxt-plotly to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-plotly"],
  1. Add plotly.js-dist-min to the vite.optimizeDeps.include section of nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: ["plotly.js-dist-min"],

That’s it! You can now use Nuxt Plotly Module in your Nuxt app :sparkles:

hi @boomgeek
:wave: welcome to the community.

Thank you for creating and sharing this new package with us.

1 Like