trois VS vue-chartjs

Part of the reason is because libraries like Paper.js, Pixi.js, and Three.js are working with canvas, which doesn't have inner DOM elements. But the, I remembered Trois.js and it's amazing API for rendering 3D scenes via components.

Because of this, many libraries emerged with the aim of using Three.js inside a framework. I have tried Angular Three and Trois.js for Vue but I prefer React Three Fiber because of its large community, examples and documentation but feel free to give a try to the other ones.

As a Web 3D developers, I emphasis, the past years haven't been kind, the learning curve was steep and a lot of work has to be done to get a decent product, but I believe the trend is changing, the technology is getting more accessible and more recognized, a lot JavaScript libraries/frameworks are integrating three.js (React Fiber, Vue Trois ...) to their ecosystem extending the community, there are also more WebGL based editors some using three.js as an engine (Spline, Vectary ...) while they're far from being blender or 3ds Max, and they'll probably never will be, they're in active development and a good starting point toward a more software based development.

- VueUse (https://vueuse.org/) - Pinia (https://pinia.vuejs.org/) - Vite (obvs) - Tailwind as mentioned - Added Oruga :) - TroisJS (https://troisjs.github.io/) when I want to go 3d - Netlify CMS (I rely heavily on Netlify, at this point) Not going to use everything always, but this gives me the flexibility to go anywhere I want, with Vue at the heart of it all.

⚡️ ViteJS / HMR Really fast development time with ViteJS/HMR ! Useful to create awesome 3D scenes. https://troisjs.github.io/

TroisJS : https://github.com/troisjs/trois

Well the code of conduct is 6 years old https://github.com/apertureless/vue-chartjs/blob/main/CODE_OF_CONDUCT.md :p

Now, there is library for Vuejs, you can find it at this url https://github.com/apertureless/vue-chartjs/ . I have not worked with it before and I could not help you too much with it but I think there is nothing that looking at the docs can not be solved.

Note: If you're using React or Vue there's a good chance you'll be better off installing and using a React wrapper or Vue wrapper.

In the ChartView component, we use the vue-chartjs library to display the charts. Our setup script contains the required imports and registers the Chart.js components:

We won't go into all the details of how to create the chart above on the JS side of things, but the gist is that we've used the Chart.js library and its wrapper in Vue (styling in the bottom of the post). That said, we need to provide the front-end with two pieces of data: the labels and the totals for each label.

vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components. https://github.com/apertureless/vue-chartjs