The integration of Vue.js with NativeScript is a match made in heaven for those who wish to extend their existing web skills to native mobile applications. This article will provide a quick introduction on how this can be achieved.
What is NativeScript?
From experience, I’ve found NativeScript to be easy to use and extremely flexible. One codebase is all that is required to implement both iOS and Android applications. Should there be scenarios where one platform differs from the other, it is easy to target a specific platform in the codebase through platform-specific CSS and JS files or inline checks within the code itself.
What is Vue?
Vue is a high-performing, progressive framework for implementing user interfaces. Vue allows for component-based development, giving you the ability to more easily organize code, as well as take advantage of code reuse. Vue also provides what one would typically expect from a UI framework—The ability to extend HTML elements with things such as declarative databinding, conditionals and looping. To add icing to the cake, it also provides fun animations and transitions.
Bringing it Together
The core libraries of Vue are UI-centric, making it portable to other projects. NativeScript-Vue is one such implementation and is available as a NativeScript plugin. This plugin is targeted toward either NativeScript developers who are experienced with Vue.js, or Vue developers that are interested in getting into mobile application development.
To install NativeScript, Node.js is required. Then you can use an all-inclusive script to make the installation of further dependencies easier. This script is available as a PowerShell script for PC and via a Ruby script that leverages Homebrew for the Mac. While the installation process isn’t necessarily quick, it does make installation a breeze. Links to a more advanced but manual installation for Windows, Mac and Linux are also available.
One of the nice things about NativeScript is the starter templates available designed to give you a head start on your application’s development, without having to worry about basic plumbing code. There are a few templates available for using Vue with NativeScript, and in the case of this article, we will be utilizing the nativescript-vue-rollup-template. This template uses some additional software, but please note that this additional software is not a requirement for using Vue with NativeScript—They are a requirement of this specific template. As the name suggests, this template uses another piece of software called Rollup. Rollup allows you to utilize the upcoming ES6 module system today (currently it is not implemented in Node.js). What is nice is that by utilizing Rollup, you are also future-proofing your code. Installing Rollup is easy. From a command prompt, install it from npm as follows:
npm install rollup --global
Now that all the necessary software is installed, let’s get to developing an application.
Building the Template Application
We will generate our project by using the NativeScript Vue Rollup Template. Using a command prompt, navigate to the location where the source code files will reside. From there, instantiate a new project named ns-with-vue by executing the following:
tns create ns-with-vue --template nativescript-vue-rollup-template
This will create a folder called ns-with-vue that will contain the project source code assets as well as all the necessary dependencies. Navigate into this folder from your command prompt:
Without closing the existing command prompt window, open a second one—Navigate to your project directory and execute the following statement to initialize the rollup functionality:
rollup -c -w
We will keep this terminal window running in the background, as it will identify code changes and compile them accordingly.
Switch back to the original window. Inside the project folder, you will see that there is an app directory as well as a tns directory. Inside the app directory is where you will find the Vue files. Rollup will identify changes in this app folder and compile them into the tns directory. Thus, in order to actually run the default template application, we will need to navigate into the tns directory.
From this directory, we can run the initial sample by running an emulator or attaching a physical device. In this case, I will be using Genymotion as an Android emulator. Run the application on Android by executing the following:
tns run android
Upon installation of the application on your device or emulator, you should see a screen similar to the following:
Have fun modifying the values in the textboxes and seeing how they update in the object label displayed above.
Creating a Simple Component
Create a new file in the App\Components folder called HelloSweetcode.vue, and replace it with the following listing (documented inline):
Next, open App\App.vue and replace it with the following listing (documented inline):
When you run the application, the HelloSweetcode component will be displayed. The title visibility is toggled on or off by pressing the button. The text bound to field1 is also live. If changes are made to the text in the textbox, they will be reflected in the label bound to the same field.
This article only brushes the surface of the integration of Vue.js and NativeScript. It also serves as an example of the great flexibility and extensibility that NativeScript provides.