🚀 We just released Cinoteka – a movie collection & watchlist app 🎬

Built with:
⚡ Nuxt 4
🎨 Nuxt UI
📦 NuxtHub
🍹Pinia Colada
🖼️ Vue.js

Started as an intern practice project, it turned out so good we had to share it!✨

Big thanks to the amazing nuxt-movies project for inspiration & components 🙌

Over the next days, I will try to show how many fascinating interactive visuals can we generate with this data using advanced Vue visualization libraries.

Stay tuned

Why the Quran? The Quran's clear and defined structure, with multiple levels of sections and chapters, makes it an ideal subject for data experimentation. Preserved to the letter from the time of revelation, it is a uniquely universal dataset.

Introducing Visual Quran.

This is a data visualization experiment where we explore the fusion of cutting-edge technologies: @nuxt.com, NuxtHub, Nuxt UI, charting libraries Vue Data UI, UnovisDev, ChartJs & AnimeJs to produce interactive graphs and charts based on structural data of Quran.

This project shows how Alpine.js and ESM can power reactive frontends without bundlers—ideal for lightweight applications.
Next, we will take it up a notch and explore what we can achieve with bundlers, diving into @vuejs.org and @nuxt.com for richer enterprise-grade solutions. 🚀

Stay tuned!

For those working in bundler-free setups, Alpine.js is a gem! It provides Vue-like reactivity directly in HTML, making dynamic interfaces easy to build.

Pair it with Chart.js for rich visualization and CodeSandbox makes sharing and testing effortless—perfect for lightweight, fast prototyping!

To make the demo flexible and lightweight, I focused on a bundler-free setup. Using both UMD and ESM bundles of quran-meta, combined with Alpine.js and Chart.js, I created three versions tailored to different environments.

#FrontendDev #AlpineJS

This multi-level structure inspired me to create a Quran visualizer demo.

The goal?

To explore and present this intricate structure interactively—highlighting chapters, verses, and sections in an engaging way. For this, I used quran-meta as the data library.

#JavaScript #DataVisualization

Now that we have a JS library(quran-meta), we need a demo and playground for it—something that showcases usage across different bundle types (ESM & UMD). Ideally, it should work without a bundler and launch straight from the browser.

So, next up in my experiments: a Quran visualizer! 📖

#DataViz

Kicking off an exciting journey with #VueJS! I'll be diving deep into different use cases across the ecosystem, starting with a data library and building out cool stuff & visualizations in Nuxt.js, vanilla Vue and even more vanilla with Alpine.js.

Let’s see what Vue world has to offer!