In the May 2018 I decided to get acquainted with Vue.js. I used the free Udemy course – Vue.js Fast Crash Course and it’s time to apply some of these knowledges. In the same time, I got familiar with Capacitor. So, I decided to combine these technologies and check is it possible to integrate it.
In this tutorial I want to show you how to add Capacitor into Vue.js project, integrate Capacitor Device API and build the IOS app from Vue.js project.
To follow this tutorial you should have the basic fundamentals of the command line, installed Node, Capacitor, Vue.js CLI and have macOS with installed Xcode. All the following was done with the next requirements: Node v9.10.0, Ionic v3.20.0, Capacitor 1.0.0-alpha.x, Vue v.2.9.3
Important: In this tutorial, we used Capacitor version Alpha, so it’s not production ready.
Set up the Vue.js Application
To scaffold a simple Vue.js project we need to install vue-cli using the following command:
Then we create a simple project using installed CLI tools. Let’s call our project as vue-capacitor-example. Run the following in your terminal:
vue init webpack vue-capacitor-example
You will be asked some questions. Here is the screenshot, how to answer them:
Once you created a starter project, let’s check how it works. We need to run the next sequence in the terminal:
npm run dev
You will see next page on the 8080 port in your browser:
To add Capacitor inside our app, run the following command inside the project folder:
After this, we need to initialize the Capacitor with the information about the application. The app name will bevue-capacitor-example, the app package ID – com.roma.vueCapacitorExample.
npx cap init vue-capacitor-example com.roma.vueCapacitorExample
Change Webpack Config
By default, Webpack config in this scaffold Vue.js project is designed to build all files into dist/ folder, but it does not suit us. You can check this when you try to build the project using the next command:
npm run build
Now, you can see the dist/ folder inside the project:
The Capacitor is using www/ folder to copy all built web assets. We can decide this moment by redesigning Webpack config to fit our requirements. Just open the config/index.js and copy-paste the next code:
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
// Various Dev Server settings
host:'localhost',// can be overwritten by process.env.HOST
port:8080,// can be overwritten by process.env.PORT, if port is in use, a free one will be determined
Please, don’t forget to save this file. Now run again the previous command and check the project directory. You will see newly created www/ folder:
Next, we will change our App template. In this tutorial, we will show the internal information about the device using the Capacitor Device API by clicking a button. We will make all changes in the default src/App.vue file. Usually, the single component in the Vue.js app have the next structure:
And I will show you what we need to do by every section.
First of all, we need to include Capacitor inside the script section. Inside the methods property of App component, we will create a getDeviceInfo method. It will get the information about our device and set this info to info variable. Here is the code of script section:
Then, let’s create the simple template. Our template will be just button and one paragraph: