NOTE! You are browsing legacy documentation. For latest visit docs.nativescript.org.

NativeScript & Vue.JS

NOTE: The nativescript-vue is a community driven initiative and the Pro UI plugins provide an "experimental" suite of Vue components allowing the use of the Pro UI elements inside an NativeScript + Vue application.

Progress NativeScript UI and Vue: Overview

If you are comfortable with using vue for your NativeScript development purposes we are happy to let you know that Progress NativeScript UI exposes its components through Vue directives as well. Here are the components NativeScript UI supports with vue:

ListView for Vue: overview

ListView for Vue (distributed through the nativescript-ui-listview package on npmjs) exposes all of the familiar features already available through the NativeScript UI APIs:

  • Pull to refresh
  • Swipe to execute
  • Header and footer

For more information on setting up and using a particular feature, take a look at the dedicated article in RadListView's documentation section. The articles are extended with Vue snippets and explanations where needed.

SideDrawer for Vue: overview

SideDrawer for Vue (distributed through the nativescript-ui-sidedrawer package on npmjs) brings the familiar experience to your Vue based NativeScript application of separating the main menu from home page content via animated views. The following features are supported:

  • Transitions
  • Drawer location
  • Drawer state events

For more information on setting up and using a particular feature, take a look at the dedicated article in RadSideDrawer's documentation section. The articles are extended with vue snippets and explanations where needed.

Calendar for Vue: overview

Calendar for Vue (distributed through the nativescript-ui-calendar package on npmjs) exposes all of the familiar features already available through the NativeScript UI APIs:

  • Inline events
  • Different view modes
  • Cells customization
  • Selection

For more information on setting up and using a particular feature, take a look at the dedicated article in RadCalendar's documentation section. The articles are extended with Vue snippets and explanations where needed.

Chart for Vue: overview

Chart for Vue (distributed through the nativescript-ui-chart package on npmjs) exposes all of the familiar features already available through the NativeScript UI APIs:

  • Series - LineSeries, SplineSeries, AreaSeries, BarSeries, RangeBarSeries, BubbleSeries, ScatterBubbleSeries, ScatterSeries, OhlcSeries, CandlestickSeries, PieSeries, DonutSeries
  • Axes - LinearAxis, CategoricalAxis, DateTimeCategoricalAxis
  • RadCartesianChartGrid
  • RadLegendView

For more information on setting up and using a particular feature, take a look at the dedicated article in RadChart's documentation section. The articles are extended with Vue snippets and explanations where needed.

DataForm for Vue: overview

DataForm for Vue (distributed through the nativescript-ui-dataform package on npmjs) exposes all of the familiar features already available through the NativeScript UI APIs:

  • Properties
  • Groups
  • Editor
  • Validators

For more information on setting up and using a particular feature, take a look at the dedicated article in RadDataForm's documentation section. The articles are extended with Vue snippets and explanations where needed.

AutoComplete for Vue: overview

AutoComplete for Vue (distributed through the nativescript-ui-autocomplete package on npmjs) exposes all of the familiar features already available through the NativeScript UI APIs:

  • Suggest modes - Suggest, Append and SuggestAppend
  • Display modes - Plain and Tokens
  • Token Layout modes - Wrap and Horizontal
  • Completion modes - StartsWith and Contains

For more information on setting up and using a particular feature, take a look at the dedicated article in RadAutoComplete's documentation section. The articles are extended with Vue snippets and explanations where needed.

Gauge for Vue: overview

Gauge for Vue (distributed through the nativescript-ui-gauge package on npmjs) exposes all of the familiar features already available through the NativeScript UI APIs:

  • Scales
  • Indicators

For more information on setting up and using a particular feature, take a look at the dedicated article in RadGauge's documentation section. The articles are extended with Vue snippets and explanations where needed.

Installation

The Vue directives for NativeScript UI are part of the plugins that provide each component and are available on npmjs.org. For each plugin you can find the directives in a Vue folder within the plugin's main folder. From that point, you have a couple of approaches to use components which are described in the Getting started article.

Ask the community