How To Create A Mobile App Using Vite, Vue and Ionic Capacitor In 8 Minutes Including Explanation
ฝัง
- เผยแพร่เมื่อ 13 ต.ค. 2024
- How To Create A Mobile App Using Vite, Vue, and Ionic Capacitor In 8 Minutes Including Explanation
#vitejs #vuejs #capacitor #ionic
/// See Full List Of Vue Mobile App Tutorials - bit.ly/42TkYnH
//////// Sign Up For Our Newsletter buff.ly/3lAk2jL
vue mobile app creation with vue js
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:
In this tutorial, we'll show you how to create a Vue.js mobile app with Vite and Ionic Capacitor. We'll cover everything you need to know to convert your Vue.js project to a mobile application and deploy it to a simulator using Ionic Capacitor.
//////// Need Help With Your Project www.clearlyinn...
Specifically, we'll cover:
How to create a Vue.js project with Vite
How to convert your Vue.js project to a mobile application with Ionic Capacitor
How to deploy your mobile application to a simulator using Ionic Capacitor
How to use live-reload for an efficient development process
Please note that we won't be using Ionic Framework Components in this process, but let us know in the comments if you'd like to see that covered in a future video. Also, this same process should work with ReactJS.
Whether you're new to mobile app development or have experience with Vue and Ionic Capacitor, this tutorial is perfect for anyone looking to create a Vue.js mobile app.
//////// Series Playlist - • vite vue capacitor
🔗 Links
--------------
Ionic Capacitor - capacitorjs.com/
Vite - vitejs.dev/
Ionic VS Code Plugin - marketplace.vi...
👉🏼 Book a one to one with me
ko-fi.com/s/8b...
#ionicframework #javascript #vue #mobile #mobileapp #mobiledevelopment #webdevelopment #reactnative
~-~~-~~~-~~-~
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
Thanks for this video. Can’t wait to give Capacitor a try!
Worked like a charm thanks to your guidance, much appreciated
Glad it helped
Hi Aaron, thanks for sharing! I followed your tutorial and was able to run the vite-vue template on android and web, do you have some recommendations regarding the UI/UX how to create simple layouts or some tips? Not sure if I should go with HTML CSS like web development, or use some library to create app-like components?
i usually suggest that if you are just starting out to use ionic components so that you can get the win of getting the first application built and learn the whole process. After that there are component frameworks like Konsta, Vuetify, and Quasar
Thank you very much Aaron !
Just a question, when you launched IOs build and emulator, did you have to have XCode installed locally ?
Thank you in advance,
Yea
Thanks for the video! Im going to be doing this but with react today 🙂
I am certain I have a react video here somewhere doing the same
@@AaronSaundersCI Hey, I have been able to follow the guide, however I am having problems when using a dev-container in VScode. The live reload does not work and i have to manually refresh. Also ADB devices works outside of the container, but not within. I think it is a port issue, have you experienced this before?
@@knobbler2003 I have never used a dev-container… don’t even know what it is. Are u using the ionic-vscode plugin?
@@AaronSaundersCI I am using it to store the ionic-vscode plugin settings so that other developers will have it installed in their dev environment along with other config like prettier. It uses docker, its really useful when it works! I found an article to help with that part
Super this!, can this just apply the mobile theme (ios/android)? when obviously is open on the mobile and the normal theme on the browser? . thanks!
If it is a chrome browser it will default to android and iOS on safari
@@AaronSaundersCI Thanks for your reply!
Welcome back, Aaron!
thanks
What is the app size after all these tools compared to if I have used just ReactNative?
Not sure, but honestly I have never once had a client ask me what the app size is, so I doing worry about that… 😬
Very helpful, thanks! By any chance have you used Ionic and Interia for a mobile app?
Unfortunately not
Thanks!
Thank You for your support
This is nice man. Thanks
Glad you like it!
Do i need to install other applications? Like Android Studio so the simulator works? My Simulator isn't running or starting... i tried both IOS and Android and they both silently fail... it starts for a few seconds and just shuts off.... HELP.
What I usually do is manually start Xcode and my simulator to make sure things are right if it doesn’t work the first time
for the record, I don't have android studio or anything downloaded other than what you showed in NPM and Ionic@@AaronSaundersCI
@@ALLCAPS required dependencies - capacitorjs.com/docs/v2/getting-started/dependencies
nice
So i can publish this build on the iPhone App Store?
YES
¡Thanks a lot Aaron! 🧐
Glad you enjoyed it, please give video a like and subscribe to the channel
Hey Aaron, thank you very much for your work. I got a question, I have a problem with vuefire and ionic.
router.beforeEach(async (to) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
const user = await getCurrentUser();
if (requiresAuth && !user) {
return '/login';
}
})
When the app started up It showed me a white page, and the problem is with getCurrentUser of vuefire. Do you knwo why?
Pleas post an issue in the project and show me the specifics of your main.ts, also I am assuming you are a subscriber 😬
Very nice man!
When I try to run the iphone 14 ios 16.4 simulator ( or any other simulator in my list ) I gets stuck at "{simulator name }: Building Native..." in the output it's periodically logging [INFO] Waiting for connectivity with npm...
Any suggestions?
What command are I using to run the app
@@AaronSaundersCI I'm running on it via the extension UI, Run -> iOS. It builds and syncs properly.
@@timfranklin4724 can you show the log output? also are you running live reload?
Nice!
Thanks!
i tried getting the capacitor example project running but it only showed a white splash screen. i'll have a look at the plugin when i have time again
Not really providing much information for me to provide any help, let me know how it goes moving forward
@@AaronSaundersCI no worries. I got it to a point where no errors were shown in the logs anymore. But I think it might be because I left out the build or a wrong setting in the webdir
this video is good but it doesnt include the installation of java and all the necesarry dependencies for this to run. Now i am having trouble
if you go to the ionic website it will explain all that is needed to get capacitor up and running
I don´t know why, but when i try to run in IOS only show me a notification that says "Unable to find any devices: irigin: Ionic (extension)"
i would need more information to be able to provide assistance. But I would first ensure that you have the proper libraries installed for capacitor
@@AaronSaundersCI forget it, it was just a firewall problem, i fixed it, thanks a lot for video
@@JulioCampoSwork what did you disable in firewall?
@@JulioCampoSwork how did you fix this please
i dont know if its my java version this has not worked for me. ive tried everthing on windows 11
I run cmd ionic cap run ios -l --external and stuck on [INFO] Waiting for connectivity with npm...
I fixed by edit script : "ionic:serve": "vite dev --host". Tks.
@@free_dev I don’t usuall run the commands directly, I use the vscode plugina
hey , thanks for your video , but i have problem i cant solve it , i don´t know why, but when i try to run in IOS only show me a notification that says "Unable to find any devices , same happen when i clicked to andiord exactly the same , i did everything like your tutorial !!! and my OS is windows 10 , could you please guide me !
Do you have Xcode or Android studio installed?
@@AaronSaundersCI same thing here, I have android studio installed but I get same issue
Can someone send me a link to a project?? Also I have found that on android I have to launch the emulator first
@@AaronSaundersCI i have OS windows obviously i don't have XCode i have installed android studio but still have problem
Please any hope on how to fix this?
Could not open settings generic class cache for settings file 'C:\dev\appName\android\settings.gradle' (C:\Users\user\.gradle\caches\8.0.2\scripts\41bleq3pqmzd04rqmo279sxv9).
> BUG! exception in phase 'semantic analysis' in source unit '_BuildScript_' Unsupported class file major version 65
No idea how to fix this......
8h later and tons of errors, downgrades, versions checks, path changes later i manage to make it work. now im not gonna turn of my PC ever again.....
the code is a bit old, and android gradle upgrade issues can create problems, but once you get it locked in, you are usually good to go. Glad it worked out for you
## Series Playlist - th-cam.com/play/PL2PY2-9rsgl1qJS3CBrbJxmbLBDBa2E1x.html
i get this issue trying to run iOS simulator :
[Ionic] iPhone 14 Pro (simulator) iOS 16.4...
> npx ionic cap run ios --target=A2D34EFB-9691-4641-A53B-E696D4DFEA64 --livereload --external
> capacitor sync ios
✔ Copying web assets from dist to ios/App/App/public in 33.07ms
✔ Creating capacitor.config.json in ios/App/App in 3.17ms
✔ copy ios in 74.61ms
✔ Updating iOS plugins in 813.29μs
[info] Found 4 Capacitor plugins for ios:
@capacitor/app@5.0.6
@capacitor/haptics@5.0.6
@capacitor/keyboard@5.0.6
@capacitor/status-bar@5.0.6
✔ Updating iOS native dependencies with pod install in 9.48s
✔ update ios in 9.57s
[info] Sync finished in 11.166s
> npm run ionic:serve -- --host=0.0.0.0 --port=8101
[npm] > viteapp@0.0.0 ionic:serve
[npm] > npm run dev --host=0.0.0.0 --port=8101
[npm] > viteapp@0.0.0 dev
[npm] > vite
[npm] VITE v4.4.6 ready in 1138 ms
[npm] ➜ Local: localhost:5173/
[npm] ➜ Network: use --host to expose
[INFO] Waiting for connectivity with npm...
it just hangs on waiting for connectivity with npm.
what does the script section of package.json look like?
Turning on live reload gets stuck at waiting for npm
Need more information? Can u point my top a sample project?
i think i didnt miss a step but i get the "unable to find any devices" error when clicking on 'ios' or 'android' - what did i forget?
You have to have installed Xcode or android studio
@@AaronSaundersCI you sir are a saint! thanks i'll try that! :D
Free Palestine
Nice!
Thanks, glad you found it helpful please consider like and subscribe 🙏🏾
Free Palestine