DEV Community

Cover image for Mobile iOS, Android App with VueJS in 5 minutes ! Really ! #EN
Ayrton
Ayrton

Posted on

Mobile iOS, Android App with VueJS in 5 minutes ! Really ! #EN

#ios #android #app #vue

Hi beginners or not !
Today i will show you how to make an awesome mobile app from scratch with VueJS and Capacitor, directly compatible with iOS and Android mobile device.

The first question is

How it’s work ?

Did you know CapacitorJS ?

CapacitorJS is full package to set Node app compatible with iOS and Android,

The first step is the requirement:

  • Android Studio with the latest SDK
  • XCode latest version

and now you can start.

Create a basic VueJS app with @vue/cli packages 

vue create app
Enter fullscreen mode Exit fullscreen mode

set the configuration as you want, not very important at this step.

ok then,

install CapacitorJS on your project 

npm install @capacitor/core @capacitor/cli
Enter fullscreen mode Exit fullscreen mode

now you can type this command:

npx cap init
Enter fullscreen mode Exit fullscreen mode

respond to the questions,

so now very important step,
inside the capacitor.config.json file, change

webDir: "www"
Enter fullscreen mode Exit fullscreen mode

to

webDir: "dist"
Enter fullscreen mode Exit fullscreen mode

ok you can build your project

npm run build
Enter fullscreen mode Exit fullscreen mode

and now, it's ready to do the best thing :

Android 

npx cap add android
Enter fullscreen mode Exit fullscreen mode

iOS 

sudo gem install cocoapods
npx cap add ios
Enter fullscreen mode Exit fullscreen mode

and now do the magic thing:

npx cap copy
Enter fullscreen mode Exit fullscreen mode

wow !

Now you can open XCode or Android Studio with this command :

// Android Studio
npx cap open android
// XCode
npx cap open ios
Enter fullscreen mode Exit fullscreen mode

Android Studio
Build Android App

XCode
Build iOS App

Very awesome no ?

Note

For iOs you need to install xcode dependency, follow XCode install instruction to perform this.

and for lazy people
https://gitlab.com/Simerca/vuejs-mobileapp-exemple

Références

Top comments (5)

Collapse
 
tr3nt profile image
Ezhaym N •

Thanks!

I made an app using this tutorial to create and publish the apk.
I'd like to make a small contribution.

The app store rejected my app after 2 days online, because Capacitor doesn't have "close app" behavior on hardware back button.

/** Adding hardware back button behavior */
import { Plugins } from '@capacitor/core'
const { App } = Plugins

App.addListener("backButton", () => {
    App.exitApp()
})
Enter fullscreen mode Exit fullscreen mode

If you want to make a Capacitor app, remember this!

Collapse
 
simerca profile image
Ayrton •

Does the tutorial is simple to follow .?
Thanks for your contributing !

Collapse
 
sid8925 profile image
Shubham Siddharth •

Hello, how to add push notification in this ? if any one could help?

Collapse
 
simerca profile image
Ayrton •

Hi ! No simple direct way to full implement this ! I can work on another tutorial. 👌

Collapse
 
simerca profile image
Ayrton • • Edited

Don't forget to discuss with me ! 🙃
And sorry for my English !
Kiss from France

Read next

oneminch profile image

How to Register Custom Directives in Nuxt 3

Dawit -

randomengy profile image

Data-only FCM push messages on iOS SwiftUI

David Rickard -

ajmal_hasan profile image

Implementing Root Detection and File Existence Security Checks in React Native (Android) - 1

Ajmal Hasan -

ajmal_hasan profile image

Implementing Root Detection and File Existence Security Checks in React Native (iOS) - 2

Ajmal Hasan -