No video :(

How To Create A Mobile App Using Vite, Vue and Ionic Capacitor In 8 Minutes Including Explanation

Подписаться 6 тыс.

Просмотров 34 тыс.

50% 1

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...
~-~~-~~~-~~-~

Опубликовано:

28 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 83

@AaronSaundersCI Год назад

If you enjoyed the content you can help support the channel, consider hitting the THANK YOU button

@kriscollins7513 7 месяцев назад

Worked like a charm thanks to your guidance, much appreciated

@AaronSaundersCI 4 месяца назад

Glad it helped

@TeleRocker11 9 месяцев назад

Thanks for this video. Can’t wait to give Capacitor a try!

@knobbler2003 7 месяцев назад

Thanks for the video! Im going to be doing this but with react today 🙂

@AaronSaundersCI 7 месяцев назад

I am certain I have a react video here somewhere doing the same

@knobbler2003 7 месяцев назад

@@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?

@AaronSaundersCI 7 месяцев назад

@@knobbler2003 I have never used a dev-container… don’t even know what it is. Are u using the ionic-vscode plugin?

@knobbler2003 7 месяцев назад

@@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

@mauriblint 9 месяцев назад

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?

@AaronSaundersCI 9 месяцев назад

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

@AaronSaundersCI Год назад

## Series Playlist - ru-vid.com/group/PL2PY2-9rsgl1qJS3CBrbJxmbLBDBa2E1x

@stephensagarinojr.4170 4 месяца назад

nice

@aekasitt Год назад

Welcome back, Aaron!

@AaronSaundersCI Год назад

thanks

@carlotadias9335 4 месяца назад

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,

@AaronSaundersCI 4 месяца назад

Yea

@ionpopescu5568 Год назад

Thanks!

@AaronSaundersCI Год назад

Thank You for your support

@rcthijsen Год назад

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!

@AaronSaundersCI Год назад

If it is a chrome browser it will default to android and iOS on safari

@rcthijsen Год назад

@@AaronSaundersCI Thanks for your reply!

@dalsbury1979 Год назад

Very helpful, thanks! By any chance have you used Ionic and Interia for a mobile app?

@AaronSaundersCI Год назад

Unfortunately not

@Dabayare 11 месяцев назад

What is the app size after all these tools compared to if I have used just ReactNative?

@AaronSaundersCI 11 месяцев назад

Not sure, but honestly I have never once had a client ask me what the app size is, so I doing worry about that… 😬

@elmenikmati Год назад

¡Thanks a lot Aaron! 🧐

@AaronSaundersCI Год назад

Glad you enjoyed it, please give video a like and subscribe to the channel

@mikasaace 10 месяцев назад

So i can publish this build on the iPhone App Store?

@AaronSaundersCI 10 месяцев назад

YES

@JuriBinturong 8 месяцев назад

This is nice man. Thanks

@AaronSaundersCI 4 месяца назад

Glad you like it!

@cypriandev 2 месяца назад

i dont know if its my java version this has not worked for me. ive tried everthing on windows 11

@attracdev Год назад

Nice!

@AaronSaundersCI Год назад

Thanks!

@janmichaelbesinga3867 14 дней назад

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

@AaronSaundersCI 11 дней назад

if you go to the ionic website it will explain all that is needed to get capacitor up and running

@ALLCAPS 7 месяцев назад

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.

@AaronSaundersCI 7 месяцев назад

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

@ALLCAPS 7 месяцев назад

for the record, I don't have android studio or anything downloaded other than what you showed in NPM and Ionic@@AaronSaundersCI

@AaronSaundersCI 7 месяцев назад

@@ALLCAPS required dependencies - capacitorjs.com/docs/v2/getting-started/dependencies

@theretroman3862 7 месяцев назад

Very nice man!

@user-rn3dp6ix9r Год назад

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?

@AaronSaundersCI Год назад

Pleas post an issue in the project and show me the specifics of your main.ts, also I am assuming you are a subscriber 😬

@willi1978 Год назад

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

@AaronSaundersCI Год назад

Not really providing much information for me to provide any help, let me know how it goes moving forward

@willi1978 Год назад

@@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

@JulioCampoSwork Год назад

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)"

@AaronSaundersCI Год назад

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

@JulioCampoSwork Год назад

@@AaronSaundersCI forget it, it was just a firewall problem, i fixed it, thanks a lot for video

@kaylen407 Год назад

@@JulioCampoSwork what did you disable in firewall?

@araromirichie4825 Год назад

@@JulioCampoSwork how did you fix this please

@timfranklin4724 Год назад

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?

@AaronSaundersCI Год назад

What command are I using to run the app

@timfranklin4724 Год назад

@@AaronSaundersCI I'm running on it via the extension UI, Run -> iOS. It builds and syncs properly.

@AaronSaundersCI Год назад

@@timfranklin4724 can you show the log output? also are you running live reload?

@Daaboo 4 месяца назад

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......

@Daaboo 4 месяца назад

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.....

@AaronSaundersCI 4 месяца назад

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

@free_dev Год назад

I run cmd ionic cap run ios -l --external and stuck on [INFO] Waiting for connectivity with npm...

@free_dev Год назад

I fixed by edit script : "ionic:serve": "vite dev --host". Tks.

@AaronSaundersCI Год назад

@@free_dev I don’t usuall run the commands directly, I use the vscode plugina

@Useful3min Год назад

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.

@AaronSaundersCI Год назад

what does the script section of package.json look like?

@Chuyu Год назад

Turning on live reload gets stuck at waiting for npm

@AaronSaundersCI Год назад

Need more information? Can u point my top a sample project?

@guardesign Год назад

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 !

@AaronSaundersCI Год назад

Do you have Xcode or Android studio installed?

@araromirichie4825 Год назад

@@AaronSaundersCI same thing here, I have android studio installed but I get same issue

@AaronSaundersCI Год назад

Can someone send me a link to a project?? Also I have found that on android I have to launch the emulator first

@guardesign Год назад

@@AaronSaundersCI i have OS windows obviously i don't have XCode i have installed android studio but still have problem

@araromirichie4825 Год назад

Please any hope on how to fix this?