Плагины работают так же, как и в любом другом приложении NativeScript, но вы можете задаться вопросом, как модули UI будут работать с Vue.

Использование UI-плагинов очень похоже на использование NativeScript UI-плагинов в приложении на Angular.

Пример использования: nativescript-gradient

Рассмотрим на примере nativescript-gradient. Вы также можете посмотреть, как он используется в listview sample.

Установка плагина с использованием NativeScript CLI

После того как вы настроили свою систему для разработки на NativeScript, запустите следующую команду:

$ npm install --save nativescript-gradient

Замечание: Если ваш плагин не работает, попробуйте удалить папку platforms:

$ 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>