Plugins work as in any other NativeScript app, but you may wonder how UI plugins work with Vue.

UI plugins work almost identically to how you'd use a NativeScript UI plugin in an Angular app.

Sample use: nativescript-gradient

Let's review how you can use nativescript-gradient. You can also check its use in the listview sample.

Install the plugin using the NativeScript CLI

After you have set up your system for NativeScript development, run the following command:

$ npm install --save nativescript-gradient

NOTE: If your plugin doesn't work right away, you might need to clean the project by removing the Platforms folders:

$ rm -rf platforms

Register the plugin in your app

Open your app entry file (likely app.js, main.js or main.ts) and add the following line at the top:

Vue.registerElement('Gradient', () => require('nativescript-gradient').Gradient)

This requires and registers the plugin in your Vue instance. The registerElement function expects the name of the <Element> as the first argument, and a function that returns the plugin as its second argument. Provide the element name exactly as you are supposed to call it in your code. Provide the plugin name exactly as its npm package name.

Use the plugin in your app

<Gradient direction="to right" colors="#FF0077, red, #FF00FF">
  <Label text="Best gradient." horizontalAlignment="center"
         style="color: white; padding: 20" />
</Gradient>