{"repo":"superdev-tech/nuxt-plotly","free":true,"listed":false,"github":"https://github.com/superdev-tech/nuxt-plotly","clone":"git clone https://github.com/superdev-tech/nuxt-plotly.git","description":"📊 Enhance your Nuxt 3 projects with interactive data visualizations using nuxt-plotly – Simplified Plotly.js integration made easy!","language":"Vue","stars":32,"topics":["charting","data-visualization","frontend","interactive-visualizations","javascript","nuxt","nuxtjs","plotly"],"license":"MIT","category":"api-integrations-sdks","readme_excerpt":"Nuxt Plotly Module 📊 nuxt-plotly module is thin Nuxt3 wrapper for plotly.js - 🏀 Online playground - 📖  Plotly Documentation Features - 🎇   All plotly.js methods and events - 🗾   Auto redraw on screensize changes and props update - 🚀   Data reactivity - 🏝️   TypeScript support Quick Setup 1. Add nuxt-plotly dependency to your project 2. Add nuxt-plotly to the modules section of nuxt.config.ts 3. Add plotly.js-dist-min to the vite.optimizeDeps.include section of nuxt.config.ts That's it! You can now use Nuxt Plotly Module in your Nuxt app ✨ 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 tag. 2. Create a file with the .client.vue extension, for example, PieChart.client.vue and then you can use the component without the tag. Plotly Event listeners You can access Plotly events using the @on-ready directive to receive the PlotlyHTMLElement object from the component. - HTML template example - After receiving the PlotlyHTMLElement, you can access Plotly events Plotly Functions 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. - Step 2: After setting the inject option to true, you can now access the plotly function via $plotly in your nuxt project. Type Aliases These type aliases simplify the usage of Plotly types in your Nuxt project: With these ","default_branch":null,"files":null,"tree":[],"storefront":"/r/superdev-tech","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/superdev-tech/nuxt-plotly/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}