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?
JavaScript has risen to be one of the most popular programming languages in modern software development. It supports the development of many types of applications, from backend service development to web applications, and even mobile applications. In this article, we will concentrate on mobile application development.
From a technology perspective, there is an appeal in being able to use what you would typically consider as web technologies and being able to bridge them to build a compiled native mobile application. This is exactly what NativeScriptM provides to you. The HTML5, CSS and JavaScript stack is the tooling of choice when implementing native iOS and Android applications with NativeScript. This allows for immediate familiarity for existing web and JavaScript developers, lowering the barrier of entry into native mobile development. NativeScript also supports many popular frameworks for implementation, ranging from Angular to Typescript or regular, plain old vanilla JavaScript.
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.
Software Installation
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:
cd ns-with-vue
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.
cd tns
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.
Conclusion
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.
