{"id":15287115,"url":"https://github.com/superdev-tech/nuxt-plotly","last_synced_at":"2025-04-23T15:46:15.994Z","repository":{"id":183390142,"uuid":"669017392","full_name":"superdev-tech/nuxt-plotly","owner":"superdev-tech","description":"📊 Enhance your Nuxt 3 projects with interactive data visualizations using nuxt-plotly – Simplified Plotly.js integration made easy!","archived":false,"fork":false,"pushed_at":"2024-07-08T11:52:18.000Z","size":1509,"stargazers_count":29,"open_issues_count":5,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T06:16:47.650Z","etag":null,"topics":["charting","data-visualization","frontend","interactive-visualizations","javascript","nuxt","nuxtjs","plotly"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/nuxt-starter-1bs1ke?file=app.vue","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/superdev-tech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-21T06:37:30.000Z","updated_at":"2025-02-26T20:35:35.000Z","dependencies_parsed_at":"2023-07-24T09:28:32.663Z","dependency_job_id":"aeb47797-adc1-4ddb-9d72-b1c8b1a52f32","html_url":"https://github.com/superdev-tech/nuxt-plotly","commit_stats":{"total_commits":34,"total_committers":2,"mean_commits":17.0,"dds":0.02941176470588236,"last_synced_commit":"ff7ab2dc6ea38e209756fe58ceae4cd22262a6d0"},"previous_names":["superdev-tech/nuxt-plotly"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superdev-tech%2Fnuxt-plotly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superdev-tech%2Fnuxt-plotly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superdev-tech%2Fnuxt-plotly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superdev-tech%2Fnuxt-plotly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/superdev-tech","download_url":"https://codeload.github.com/superdev-tech/nuxt-plotly/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250463284,"owners_count":21434755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charting","data-visualization","frontend","interactive-visualizations","javascript","nuxt","nuxtjs","plotly"],"created_at":"2024-09-30T15:24:20.689Z","updated_at":"2025-04-23T15:46:15.974Z","avatar_url":"https://github.com/superdev-tech.png","language":"Vue","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/superdev-tech/nuxt-plotly\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg style=\"width:400px\" src=\"https://raw.githubusercontent.com/superdev-tech/nuxt-plotly/main/nuxt-plotly-logo.svg\" alt=\"nuxt-plotly logo\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.com/package/nuxt-plotly\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/nuxt-plotly/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\" alt=\"npm version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/nuxt-plotly\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/nuxt-plotly.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\" alt=\"npm download\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/superdev-tech/nuxt-plotly/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/nuxt-plotly.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\" alt=\"MIT license\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://nuxt.com/modules/nuxt-plotly\"\u003e\u003cimg src=\"https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\" alt=\"nuxt-plotly module on nuxt official\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n# Nuxt Plotly Module\n\n📊 `nuxt-plotly` module is thin Nuxt3 wrapper for [plotly.js](https://plotly.com/javascript/)\n\n- [🏀 Online playground](https://stackblitz.com/edit/nuxt-starter-1bs1ke?file=app.vue)\n- [📖 \u0026nbsp;Plotly Documentation](https://plotly.com/javascript/plotly-fundamentals/)\n\n## Features\n\n\u003c!-- Highlight some of the features your module provide here --\u003e\n\n- 🎇 \u0026nbsp; All plotly.js methods and events\n- 🗾 \u0026nbsp; Auto redraw on screensize changes and props update\n- 🚀 \u0026nbsp; Data reactivity\n- 🏝️ \u0026nbsp; TypeScript support\n\n## Quick Setup\n\n1. Add `nuxt-plotly` dependency to your project\n\n```bash\nnpx nuxi@latest module add nuxt-plotly\n```\n\n2. Add `nuxt-plotly` to the `modules` section of `nuxt.config.ts`\n\n```js\n// nuxt.config.js\nexport default defineNuxtConfig({\n  /**\n   * Add nuxt-plotly module\n   */\n  modules: [\"nuxt-plotly\"],\n\n  /**\n   * Add nuxt-plotly module with options\n   * Set the inject option to true to use plotly function via $plotly\n   */\n  // modules: [[\"nuxt-plotly\", { inject: true }]],\n});\n```\n\n3. Add `plotly.js-dist-min` to the `vite.optimizeDeps.include` section of `nuxt.config.ts`\n\n```js\n// nuxt.config.js\nexport default defineNuxtConfig({\n  vite: {\n    optimizeDeps: {\n      include: [\"plotly.js-dist-min\"],\n    },\n  },\n});\n```\n\nThat's it! You can now use Nuxt Plotly Module in your Nuxt app ✨\n\n## Require client-side\n\nThere are two ways to use the `nuxt-plotly` module on the client-side in Nuxt3:\n\n1. Wrap the component with the `\u003cclient-only\u003e` tag.\n\n```html\n\u003cclient-only\u003e\n  \u003cnuxt-plotly\n    :data=\"pieChart.data\"\n    :layout=\"pieChart.layout\"\n    :config=\"pieChart.config\"\n    style=\"width: 100%\"\n  \u003e\u003c/nuxt-plotly\u003e\n\u003c/client-only\u003e\n```\n\n2. Create a file with the `.client.vue` extension, for example, [PieChart.client.vue](https://github.com/superdev-tech/nuxt-plotly/blob/main/playground/components/PieChart.client.vue) and then you can use the component without the `\u003cclient-only\u003e` tag.\n\n## Plotly Event listeners\n\nYou can access [Plotly events](https://plotly.com/javascript/plotlyjs-events) using the `@on-ready` directive to receive the `PlotlyHTMLElement` object from the `\u003cnuxt-plotly\u003e` component.\n\n- HTML template example\n\n```html\n\u003ctemplate\u003e\n  \u003cclient-only\u003e\n    \u003cnuxt-plotly\n      :data=\"data\"\n      :layout=\"layout\"\n      :config=\"config\"\n      @on-ready=\"myChartOnReady\"\n    \u003e\u003c/nuxt-plotly\u003e\n  \u003c/client-only\u003e\n\u003c/template\u003e\n```\n\n- After receiving the PlotlyHTMLElement, you can access Plotly events\n\n```typescript\nfunction myChartOnReady(plotlyHTMLElement: NuxtPlotlyHTMLElement) {\n  console.log({ plotlyHTMLElement });\n\n  plotlyHTMLElement.on?.(\"plotly_afterplot\", function () {\n    console.log(\"done plotting\");\n  });\n\n  plotlyHTMLElement.on?.(\"plotly_click\", function () {\n    alert(\"You clicked this Plotly chart!\");\n  });\n}\n```\n\n## Plotly Functions\n\nTo use the [Plotly Function](https://plotly.com/javascript/plotlyjs-function-reference/) in your nuxt project, follow these steps:\n\n- Step 1: Set the `inject` option to `true` in the `nuxt-plotly` module configuration of your `nuxt.config.ts` file.\n\n```js\n// nuxt.config.js\nexport default defineNuxtConfig({\n  modules: [[\"nuxt-plotly\", { inject: true }]],\n});\n```\n\n- Step 2: After setting the inject option to true, you can now access the plotly function via `$plotly` in your nuxt project.\n\n```ts\n// app.vue\n\nconst { $plotly } = useNuxtApp();\n\n/**\n * Show all plotly functions\n */\nconsole.log($plotly);\n\n/**\n * Use downloadImage function\n */\n$plotly.downloadImage(plotlyHTMLElement as HTMLElement, {\n  format: \"png\",\n  width: 800,\n  height: 600,\n  filename: \"newplot\",\n});\n```\n\n## Type Aliases\n\nThese type aliases simplify the usage of Plotly types in your Nuxt project:\n\n```typescript\n/**\n * Represents an array of Plotly data objects.\n */\nexport type NuxtPlotlyData = Array\u003cPlotly.Data\u003e;\n\n/**\n * Represents a partial configuration object for Plotly charts.\n */\nexport type NuxtPlotlyConfig = Partial\u003cPlotly.Config\u003e;\n\n/**\n * Represents a partial layout object for Plotly charts.\n */\nexport type NuxtPlotlyLayout = Partial\u003cPlotly.Layout\u003e;\n\n/**\n * Represents a partial HTML element that holds a rendered Plotly chart.\n */\nexport type NuxtPlotlyHTMLElement = Partial\u003cPlotly.PlotlyHTMLElement\u003e;\n```\n\nWith 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.\n\n## Development: If you want to contribute\n\n```bash\n# Install dependencies\nnpm install\n\n# Generate type stubs\nnpm run dev:prepare\n\n# Develop with the playground\nnpm run dev\n\n# Build the playground\nnpm run dev:build\n\n# Run ESLint\nnpm run lint\n\n# Run Vitest\nnpm run test\nnpm run test:watch\n\n# Release new version\nnpm run release\n```\n\n## License\n\nCopyright © 2023 [Supanut Dokmaithong](https://github.com/Boomgeek).\n\nThis project is [MIT licensed](https://github.com/superdev-tech/nuxt-plotly/blob/main/LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperdev-tech%2Fnuxt-plotly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuperdev-tech%2Fnuxt-plotly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperdev-tech%2Fnuxt-plotly/lists"}