Vue + Supabase + Capacitor + DaisyUI Drawer: A Mobile App Starter Template This video covers walking through a mobile application template using Vue.js, Capacitor, Supabase, Tailwind CSS, and DaisyUI, with a specific focus on implementing a functional and responsive drawer navigation. What Covered: * Initial Setup: Project setup, including necessary libraries (Vue Router, Pinia, Supabase) and environment variables. * Authentication: Implementing user authentication with Supabase, including sign-in, sign-up, and handling authentication state. * Drawer Component: Building the drawer using daisyUI components, managing its open/close state, and handling routing. * Composables: Using a Vue.js composable (useDrawer) to centralize drawer state management. * Navigation: Setting up routes using Vue Router, linking drawer items to specific pages, and handling back button behavior. * Deployment: Building and deploying the application to an iOS device using Capacitor. ⏱️ Chapters ================= 00:00 Introduction and project overview 00:40 Demo of the app's drawer navigation 01:40 Installing daisyUI and Tailwind. 01:58 Exploring the daisyUI drawer component documentation 04:37 Walkthrough of main.ts: initializing the app, setting up authentication with Supabase. 05:53 Walkthrough of authStore.ts: managing authentication state with Pinia. 06:25 App.vue - How I am Using the Drawer Component 07:12 useDrawer Composable 07:57 Walkthrough of DrawerComponent.vue: Handling drawer open/close state. Using drawer-toggle, drawer-content, drawer-side, drawer-overlay. Rendering drawer content using slot. Using v-for to create menu items. handleLinkClick function for navigation. watch for changes in props. 13:35 Navbar component and the back button. 14:58 Creating the routes. 17:40 Building and deploying the app to an iOS device using Capacitor 🔗 Helpful Links ================= - How To Create A Mobile App Using Vite, Vue, and Ionic Capacitor In 8 Minutes Including Explanation - https://youtu.be/K_OwSHPxT-A - Setting Up Vue with Capacitor - https://youtu.be/K_OwSHPxT-A - Ionic MS Code Extension: https://ionicframework.com/docs/intro/vscode-extension#: - daisyUI: https://daisyui.com/ - Vue.js: https://vuejs.org/ - Capacitor: https://capacitorjs.com/ - Tailwind: https://tailwindcss.com/ - Supabase: https://supabase.com/ - Pinia:https://pinia.vuejs.org/ - Vue Router: https://router.vuejs.org/ 🖥️ Source Code ================= https://github.com/aaronksaunders/daisyui-vue-drawer-2025 #vitejs #vuejs #capacitor #tailwindcss #daisyui #supabase #authentication #pinia #mobileappdevelopment #mobileapps vue mobile app creation with vue js