We used the Cordova CLI to create an Ionic Vue mobile application in the previous tutorial.
This time we will use the Ionic CLI to bootstrap our application.
Let’s create the Ionic application:
And grab the required libraries:
The biggest advantage of this stack is the Webpack implementation (production builds, TypeScript, etc.) the Ionic team created for us.
If you are familiar with the Ionic Build Process, you must know that our TypeScript code will be compiled to a main.js file then called in the index.html file:
If this is still blurry for you, you can have a look at the Ionic build process tutorial.
Project Clean up
The current Ionic stack is oriented toward Angular.
There are many files and folders we don’t need.
Here is a normal Ionic Angular architecture:
And we can reduce ours to this:
The app.component.ts and app.module.ts files are both useless, however, we can’t remove them because the Ionic CLI checks for those files during the build process.
We can now go to the index.html and use the same template we used in the previous tutorial:
We still use the unpkg service to acquire the Vue and Ionic 4 libraries.
The application should trigger an error about the missing ion-app element.
To prevent this, we can modify the main.js file.
This is where we will bootstrap our Ionic Vue application:
We are working with TypeScript.
We need to declare the Vue variable with the type any, otherwise the TypeScript compiler won’t be happy.
We then acquire the Ionic Native Geolocation API.
We are not in an Angular application anymore and can’t use the Dependency Injection System. Creating a new geolocation instance will do the job.
The rest of the code is similar to the one from the previous tutorial:
The only modification here is the geolocation’s getCurrentPosition method. This one is from the Ionic Native Geolocation API which returns a Promise that contains the coords field.
Our Ionic Vue mobile application is running on a device as expected:
Using the Ionic CLI to create an Ionic 4 Vue mobile application is quite simple, we only need to add two external libraries, delete some Angular oriented files and that’s it!
Our project is ready to roll on a mobile device!