A beautiful, interactive wedding invitation web application built with Vue.js. This app allows couples to create elegant digital wedding invitations with RSVP management, gift registries, and more.
- 📱 Responsive Design - Looks great on mobile, tablet, and desktop devices
- 💌 Digital Invitations - Beautiful, animated wedding invitation cards
- 📝 RSVP Management - Guest response collection and management
- 🎁 Gift Registry - Integrated gift wishlist
- 📅 Save the Date - Calendar integration with .ics file download
- 🎵 Music Playlist - Curated wedding playlist with audio player
- 📍 Venue Information - Location details with ceremony and reception info
- 🎨 Elegant Animations - Smooth transitions and visual effects
- ♿ Accessibility - Built with accessibility in mind
- 🔍 SEO Optimized - Meta tags and PWA support
- Framework: Vue.js 3 (Composition API)
- Build Tool: Vite
- Styling: CSS Variables, Sass
- State Management: Vue Reactivity (ref, reactive, computed)
- Utilities: @vueuse/core
- Deployment: GitHub Pages
This project uses environment variables for configuration. Copy the example file and fill in your values:
cp .env.example .env| Variable | Description |
|---|---|
VITE_GA_MEASUREMENT_ID |
Google Analytics measurement ID (format: G-XXXXXXXXXX) |
VITE_APP_FIREBASE_API_KEY |
Firebase API key |
VITE_APP_FIREBASE_AUTH_DOMAIN |
Firebase auth domain |
VITE_APP_FIREBASE_PROJECT_ID |
Firebase project ID |
VITE_APP_FIREBASE_STORAGE_BUCKET |
Firebase storage bucket |
VITE_APP_FIREBASE_MESSAGING_SENDER_ID |
Firebase messaging sender ID |
VITE_APP_FIREBASE_APP_ID |
Firebase app ID |
VITE_APP_FIREBASE_MEASUREMENT_ID |
Firebase measurement ID |
VITE_WEDDING_URL |
Your wedding website URL (for OG tags) |
Note: Variables prefixed with
VITE_are exposed to the client-side code.
- Node.js 18+
- Yarn (recommended) or npm
# Install dependencies
yarn install
# Start development server
yarn dev
# Build for production
yarn build
# Preview production build
yarn previewwedding-app/
├── public/
│ ├── assets/ # Static assets (images, favicons)
│ └── manifest.json # PWA manifest
├── src/
│ ├── assets/
│ │ ├── audio/ # Wedding playlist audio files
│ │ ├── flowers/ # Decorative flower images
│ │ ├── fonts/ # Custom fonts (EB Garamond, Herr Von, Quicksand)
│ │ ├── img/ # Main images
│ │ ├── preboda/ # Pre-wedding photos
│ │ └── svg/ # SVG icons and illustrations
│ ├── components/
│ │ ├── invitation/ # Main invitation components
│ │ │ ├── weddingHeader.vue
│ │ │ ├── weddingInfo.vue
│ │ │ ├── weddingPlace.vue
│ │ │ ├── weddingSchedule.vue
│ │ │ ├── weddingForm.vue
│ │ │ ├── weddingGift.vue
│ │ │ ├── weddingPlaylist.vue
│ │ │ ├── weddingSongPlayer.vue
│ │ │ └── weddingLastMessage.vue
│ │ └── ui/ # Reusable UI components
│ │ ├── weddingButton.vue
│ │ ├── weddingInput.vue
│ │ ├── weddingSelect.vue
│ │ └── weddingTextarea.vue
│ ├── styles/
│ │ ├── fonts.css # Font definitions
│ │ ├── global.css # Global styles
│ │ └── main.css # Main styles
│ ├── utils/
│ │ ├── helper.js # Utility functions
│ │ └── calendar.js # Calendar utilities
│ ├── App.vue # Root component
│ └── main.js # Entry point
├── index.html # HTML template
├── vite.config.js # Vite configuration
└── package.json # Dependencies
Edit the WEDDING_DATE constant in:
src/components/invitation/weddingLastMessage.vue
Add audio files to src/assets/audio/ and update the playlist configuration in the relevant components.
Replace images in the respective folders under src/assets/:
img/- Main wedding imagesflowers/- Decorative elementspreboda/- Pre-wedding photos
The project includes a deployment script for GitHub Pages:
yarn deployThis will build the project and deploy it to the gh-pages branch. Configure your custom domain in the CNAME file.
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Opera 76+
This project is for personal use. Images and content are property of the couple.
Built with ❤️ for wedding celebrations