NOTE! You are browsing legacy documentation. For latest visit

NativeScript & Vue.JS

Getting Started

The following article assumes that you already have the latest version of NativeScript and have created a NativeScript application.


  • Open a console window and go to the root directory of your NativeScript application.
  • Install the package that contains the component that you want to use by typing nativescript command that adds a plugin. For example, if you want to use the chart, type
$ tns plugin add nativescript-ui-chart
  • Then import/require the installed component in your app
import * as chartModule from "nativescript-ui-chart";
var chartModule = require("nativescript-ui-chart");

Getting Started with Vue

To use a plugin which is part from Progress NativeScript UI with Vue you need to first install the corresponding plugin by executing tns plugin add nativescript-ui-<plugin-name>, for example tns plugin add nativescript-ui-chart

After installing the NPM package, we only need to install the Vue plugin by importing the nativescript-ui-chart/vue module and calling Vue.use():

import Vue from 'nativescript-vue';
import RadChartPlugin from 'nativescript-ui-chart/vue';


Once the module is required inside the NativeScript + Vue application you can take advantage of its contents by utilizing the RadCartesianChart. See this example of App.vue file:

      <BarSeries v-tkCartesianSeries
                 :items="items" />
      <CategoricalAxis v-tkCartesianHorizontalAxis />
      <LinearAxis v-tkCartesianVerticalAxis />

  import { ObservableArray } from 'tns-core-modules/data/observable-array'

  export const getCountriesData = () => {
    return new ObservableArray([
      { Country: 'Germany', Amount: 15 },
      { Country: 'France', Amount: 13 },
      { Country: 'Bulgaria', Amount: 24 },
      { Country: 'Spain', Amount: 11 },
      { Country: 'USA', Amount: 18 }

  export default {
    data() {
      return {
        items: getCountriesData(),