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.