プラグインはどんなNativeScriptのアプリでも機能しますが、UIのプラグインがどのようにVueで機能するのか気になることでしょう。

UIのプラグインは、AngularのアプリでNativeScriptのUIプラグインを用いていたのとほとんど同じように機能します。

例えば: nativescript-gradient

どのようにnativescript-gradientを使うことができるか見てみましょう。こちらのlistview sampleでも使い方を確認できます。

NativeScript CLIを使ってプラグインをインストールする

NativeScriptの開発環境のセットアップを終えてから、次のコマンドを実行して下さい:

$ npm install --save nativescript-gradient

注意: もしプラグインがすぐに動かない場合、プラットフォームのフォルダを消去してプロジェクトをクリーンする必要があります:

$ rm -rf platforms

アプリにプラグインを登録する

アプリのエントリーファイル(app.jsやmain.jsなど)を開き、次の行をトップに追加して下さい:

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

ここではVueインスタンスにプラグインを読み込んで登録しています。registerElement関数は第一引数に<Element>の名前を、第二引数にプラグインを返す関数を要求します。コードの中では、呼び出そうとするエレメントの名前を正確に渡してください。プラグインの名前はnpmのパッケージ名のように正確に渡してください。

アプリでプラグインを使う

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