Using Plugins in a NativeScript-Vue App

One of the first things we learn as programmers is "don't re-invent the wheel". You will probably need to add native touches and special functionality to your mobile apps as you work through your development cycles, and to do that, you’ll most likely use community-built or official NativeScrpt plugins. If you check the NativeScript market you can find a plugin for most of the advanced features that you want to have in your app. But getting those plugins to work in your NativeScript-Vue apps is not particularly straightforward, at least until you know how to do it. In this article, I’m assuming that you have created an app in the preferred way, using a template from within the Vue CLI.

Installing plugins in the official vue-cli template is not done the same way as in other NativeScript projects.

Let's look at how we install plugins by installing the plugin nativescript-star-ratings.

Step 1:
Open the terminal and cd to the root of your project.

Step 2:

Instead of installing the plugin with the tns plugin add command, run the following command:

$ npm install nativescript-star-ratings

This installs the plugin at the root of the application in the node_modules folder.

These type of plugins might need extra initialization; the speech recognition plugin, for example, must be initialized in the data block. Then in mounted (on iOS), you can check whether permission has been granted to access the microphone:

Each plugin will be a little different in its initialization pattern, but these two examples cover the basic use cases that you’ll encounter as you work through using plugins.

What’s going on here?

NativeScript-Vue apps’ use of plugins resembles the patterns we use in NativeScript with Angular, rather than in NativeScript Core. For example, we don't add namespaces in the StarRatings tag or on the Page element, as you do when building NativeScript Core apps. This is because in step 5 we used the "magical" registerElement function and that handles the namespacing automatically for us.

So how does this all work? When you run the app in Step 4 it sees that the dist folder was cleaned (in step 3) and regenerates the app. This bundles all the plugins that you added into the dist folder. If you do not do step 3 then it will not bundle your newly added plugins into the dist folder and they won't be available to you.

In future versions of this template the plan is to remove step 3. So please check the documentation for the vue-cli template and the #vue Slack channel to see when step 3 is no longer necessary.

Plug ‘n’ Play!

Plugins are critical to the successful completion of any NativeScript app. Fortunately, we have a vibrant community who build and iterate of them incessantly; noteworthy are Osei Fortune’s efforts to ‘vue-ify’ his suite of plugins: an example is his pager plugin, which has documention on its Vue implementation. Other prolific plugin authors are ‘Vue-friendly’ such as the inimitable Eddy Verbruggen. Just reach out on the Slack channel!