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

plotly.js
,
1

Nuxt Plotly Module (nuxt-plotly - npm)

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

Features

  • :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.
<client-only>
  <nuxt-plotly
    :data="pieChart.data"
    :layout="pieChart.layout"
    :config="pieChart.config"
    style="width: 100%"
  ></nuxt-plotly>
</client-only>
  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:

2

hi @boomgeek
:wave: welcome to the community.

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

1 Like