How To Create A Mobile App Using Vite, Vue and Ionic Capacitor - Creating The Mobile UI
HTML-код
- Опубликовано: 18 июн 2024
- How To Create A Mobile App Using Vite, Vue and Ionic Capacitor - Creating The Mobile UI
#vitejs #vue #ionic #ionicframework
In this tutorial, we'll show you how to integrate Ionic components in a vuejs mobile app. Specifically, we'll demonstrate how to add tabs and proper tabs navigation, as well as an action sheet UI component.
We'll also talk a bit about why we prefer using Ionic components in mobile app development. The reason is that using the Ionic router helps properly manage pages and authentication when using one of the navigation templates, such as Tabs, SideMenu, or SplitView.
Using the Ionic Framework provides a solid foundation for mobile app development with JavaScript frameworks. It handles standard routing, platform-appropriate animations, and UI components, making it a no-brainer. While there's nothing stopping you from mixing other UI component libraries in with your work, building everything from scratch would be time-consuming and unnecessary.
Whether you're new to mobile app development or experienced with Ionic components, this tutorial is perfect for anyone looking to build a solid foundation for their mobile app.
Capacitor is an open-source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS.
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:
🕑 Chapters
--------------------------
00:00 - introduction
03:08 - Major missing piece, Routing & Navigation
06:33 - Integrating Ionic Tabs & Tabs Navigation In Vite VueJS App
27:22 - Integrating ActionSheet UI Component
31:45 - Deploying On Device
33:00 - Making Room For Safe-Area when on Mobile Device
34:30 - Wrap-Up
Series Playlist - • vite vue capacitor
🔗 Links
--------------
Ionic Capacitor - capacitorjs.com/
Ionic Framework: Action Sheet - ionicframework.com/docs/api/a...
Ionic Framework: Tabs - ionicframework.com/docs/vue/n...
Vite - vitejs.dev/
Ionic VS Code Plugin - marketplace.visualstudio.com/...
Vuetify - vuetifyjs.com/en/
KonstaUI - konstaui.com/
~-~~-~~~-~~-~
Please watch: "Getting Started With Appwrite, Vue JS Ionic Framework & Capacitor"
• Ionic Vue, Getting Sta...
~-~~-~~~-~~-~
If you enjoyed the content you can help support the channel, consider hitting the THANK YOU button
Tailwind integration for this setup would be a nice follow up, thanks for sharing knowledge 🙏
Yes that is on my list, seems that a lot of folks have adopted tailwindcss
Thanks. nice tuts
stick around, subscribe and share because I am working on a new one as we speak
Köszönjük!
Much appreciated
What about using vuetify components over iconic component?
What about it? You are welcome to use them if you like, I just feel that ionic components are just enough and fit better together because they are mobile first components github.com/aaronksaunders/Vuetify-To-Mobile-App
Video- m.ruclips.net/video/TRFO6lwOXmo/видео.html
## Series Playlist - ruclips.net/p/PL2PY2-9rsgl1qJS3CBrbJxmbLBDBa2E1x
Great tutorial! Could you share source code, please?
ionic cli creates projects with vite right now by default... also this video shows the steps - ruclips.net/video/K_OwSHPxT-A/видео.html
Start making projects and tutorial on react native
I go through cycles, react native is coming up