Abirga — Music Festival Vue.js Template

Abirga Vue is a bold, energetic Music Festival and Event Promotion web application built as a fully functional Vue 3 app using the Composition API, Vite, and Bootstrap 5. It ships with 9 view components, a reactive audio player composable, a filterable festival photo gallery, an album showcase, an event ticket cart powered by Pinia, and a Particles.js hero — written entirely with setup() and the Composition API, with zero Options API usage.

Built for Vue developers delivering music festival sites, concert promotion apps, artist portfolio projects, or event e-commerce platforms. The codebase uses Vue 3 Composition API throughout: ref(), reactive(), computed(), watch(), and composables for audio playback and gallery filtering. Single File Components (.vue) keep template, script setup, and scoped styles co-located and clean. Replace the static JSON data sources with any REST API or headless CMS and the reactive layer adapts immediately.

Everything in the Package

• 9 view-level Single File Components across Home, Albums, Gallery, Blog, Shop, and Contact
• Vue 3 with script setup syntax and Vite — fast HMR dev server and optimised production build
• Vue Router 4 — history mode routing with lazy-loaded route components via defineAsyncComponent
• Pinia store for cart management — addItem, removeItem, updateQty, and localStorage persistence plugin
• Bootstrap 5.0.1 — responsive grid and utility classes
• Particles.js hero background on the Home view via vue-particles integration
• useAudioPlayer composable — ref()-based track state, play/pause, seek, and auto-advance logic
• Album showcase: AlbumGrid component + AlbumDetail view with v-for tracklist rendering
• Festival photo gallery: GalleryGrid with ref()-driven category filter and v-show transitions
• CountdownTimer component using onMounted, onUnmounted, and setInterval with ref() state
• Blog module: BlogGrid and BlogPost views with computed() related posts filtering
• Checkout view with VeeValidate — schema-based field validation and v-model two-way binding
• Newsletter form with ref() controlled input and submission feedback
• Swiper Vue — touch-friendly album and featured content carousels via SwiperSlide components
• Magnific Popup lightbox for full-screen gallery previews
• Retina-ready, fully responsive from 320px to 1920px+
• Vue DevTools compatible — Pinia store fully inspectable in browser

Composition API and Component Architecture

• Views: HomeView, AlbumsView, AlbumDetailView, GalleryView, BlogView, BlogPostView, CartView, CheckoutView, ContactView
• Shared components: AppNavbar, AppFooter, AudioPlayer, CountdownTimer, AlbumCard, GalleryItem, BlogCard, BackToTop
• Composables: useAudioPlayer, useGalleryFilter, useCountdown — logic separated from template for testability
• Pinia cartStore: state (items, total), actions (addItem, removeItem, updateQty, clearCart), and persist plugin
• defineAsyncComponent applied to GalleryView, BlogView, and CartView — route-level code splitting
• All data (albums, gallery items, blog posts) sourced from typed JSON in src/data/ — swap to fetch() or axios for live API
• Scoped CSS inside each .vue file — no global style bleed between components
• Folder structure: src/views/, src/components/, src/composables/, src/stores/, src/data/

All 9 Views

• /home — Particles.js hero, Swiper festival slider, album spotlight section, gallery preview, newsletter, countdown timer
• /albums — AlbumGrid with v-for rendering from albums.json, reactive sort and filter
• /album-details — AlbumDetailView with photo carousel, v-for tracklist, and concert description
• /gallery — GalleryGrid with ref() category filter: All, Afterparty, Chilling, Filming, Vibe Out
• /blog — BlogGrid with BlogCard components rendered via v-for from posts.json
• /blog-post — BlogPostView with computed() related posts based on shared tags
• /cart — CartView bound to cartStore — v-for line items, v-model quantity steppers, remove actions
• /checkout — VeeValidate form with schema validation, v-model bindings, and order summary sidebar
• /contact — Reactive contact form with v-model, validation rules, and success/error feedback

useAudioPlayer Composable

• useAudioPlayer composable wraps the HTML5 Audio API with ref() and reactive() state
• Exposes: currentTrack, isPlaying, progress, play(track), pause(), seek(time), next(), prev()
• AudioPlayer component renders a fixed bottom bar in App.vue — persists across all route changes
• watch() on the active album route param updates the track queue automatically
• onUnmounted cleanup stops audio and clears the progress interval to prevent memory leaks

Pinia Cart Store

• cartStore defined with defineStore — state, getters, and actions in one clean object
• Getters: itemCount (computed from items array), cartTotal (computed from item price × qty)
• Actions: addItem, removeItem, updateQty, clearCart — all reactive, trigger template re-renders automatically
• Pinia persist plugin syncs cart state to localStorage — survives page refresh
• Cart badge in AppNavbar bound to cartStore.itemCount via storeToRefs

Performance and SEO

• useHead (VueUse) sets per-route title and meta description reactively for SEO
• defineAsyncComponent + Suspense code-splits Gallery, Blog, and Cart view bundles
• Vite production build applies Rollup tree-shaking, chunk splitting, and asset fingerprinting
• All images carry descriptive :alt bindings meeting WCAG 1.1.1
• Google Fonts loaded with font-display: swap to prevent invisible-text flash

Use Cases

• Music Festival Organisers: Showcase lineups, sell tickets, and display galleries as a fast Vue 3 SPA
• Concert Promoters: Particles.js hero with live countdown timer and reactive Pinia cart
• Artists and Bands: Album grid, tracklist detail view, and persistent audio player composable
• Event Photographers: 32+ photo gallery with ref() category filtering and lightbox
• Music Blogs: Blog module with grid and post views, ready for headless CMS via axios
• Vue Developers: Composition API composables, Pinia stores, and Vue Router 4 patterns — production architecture from day one

Credits and Dependencies

• Vue 3 — MIT License
• Vite — MIT License
• Vue Router 4 — MIT License
• Pinia — MIT License
• VeeValidate 4 — MIT License
• Bootstrap 5.0.1 — MIT License
• Swiper Vue — MIT License
• vue-particles — MIT License
• Font Awesome 6 — Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT
• Google Fonts — SIL Open Font License
• Demo images: Unsplash — Unsplash License (free for commercial use, no attribution required)
• Demo images: Freepik — Freepik License (free for commercial use with attribution)
• All demo images are for preview purposes only and are NOT included in the download. Replace with your own licensed images before publishing.

v1.0  Initial Vue Release
- Vue 3 Composition API with script setup syntax throughout
- Vite build tooling with fast HMR and optimised production output
- 9 view-level Single File Components with Vue Router 4 history mode
- useAudioPlayer composable for persistent music playback across routes
- Pinia cartStore with localStorage persist plugin for event ticket e-commerce
- VeeValidate 4 schema-based checkout form validation
- GalleryGrid with ref() category filter for 32+ festival photos
- CountdownTimer with onMounted and onUnmounted lifecycle hooks
- defineAsyncComponent route-level code splitting on Gallery, Blog, and Cart
- useHead per-route SEO meta tags via VueUse