Nativescript-ui-feedback: Nativescript-ui-chart not registering elements in Vue

[maxorlovsky]

Did you verify this is a real problem by searching the NativeScript Forum?

Yes, there are no info about it

Tell us about the problem

Trying to get ui-charts to work in VueJS. With no luck at the moment.
Thing is, in source code I can see that chart-vue-directives.js every element and directive is being created.
Unfortunately if I try to use one of the elements I receive error
JS: [Vue warn]: Unknown custom element: <RadCartesianChart> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Which platform(s) does your issue occur on?

Tested only on Android

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: nativescript-ui-chart ^3.6.1
• CLI: 4.0.2
• Cross-platform modules: ~3.4.1

Please tell us how to recreate the issue in as much detail as possible.

Just try to follow this example http://docs.telerik.com/devtools/nativescript-ui/Controls/Vue/Chart/getting-started
Didn't worked for me. Unless there is some secret how to require modules. I used all differents way with requires/imports in main.js, on page, etc.

[diegoazh]

Same issue here

[VladimirAmiorkov]

Hi @maxorlovsky @diegoazh ,

Can you send me a sample project that reproduces this issue. Also are you sure you have required the vue module of the chart in the main file of your NativeScript + Vue application, simply add as described here:

const ChartVue = require('nativescript-ui-chart/vue');

I have attached our test project for RadChart inside NativeScript + Vue to my response, feel free to take it for a spin.
demo-vue-chart.zip

[VladimirAmiorkov]

Also here is a direct link to the NativeScript playground of the same demo application: https://play.nativescript.org/?template=play-vue&id=1M8Noq&v=2

[diegoazh]

Hi @VladimirAmiorkov, thanks for your answer. I'll try your recomendation but in vue-cli project I get the following error: "Failed to find module: "nativescript-ui-chart", relative to: app/tns_modules/".
I see in the folder vue inside nativescript-ui-chart a file with many register components but they look like webpack don't find the modules.
I tried your recomended code in main.js the way you said.
To reproduce this issue you just have to create a vue-cli project and try to use nativescript-ui-chart.
Thanks for your help.

[VladimirAmiorkov]

Hi @maxorlovsky ,

Thank you for providing the additional information. The current state of NativeScript + Vue for the nativescript ui plugins is in a "beta" mode due to the native of the current state of the nativescript-vue state which in many areas is still considered not stable. The current NativeScript UI Vue directives has been tested only inside a non CLI projects without webpack included.

We will do our best to resolve any issues caused by Vue CLI + webpack as soon as possible.

[maxorlovsky]

It wasn't me exactly who answered :) sorry, was busy in last few days. But thanks to @diegoazh who spent time replying here.
@VladimirAmiorkov yes, my problem is probably because I use webpack.

[diegoazh]

@VladimirAmiorkov excellent, thanks for your time and help.
With @maxorlovsky will wait for fix this bug as soon as possible. Good Luck!

[monkeymonk]

Hello guys, any news on this ? I don't understand how to use NativeScript UI Chart with NativeScript Vue...

As @maxorlovsky, using <RadCartesianChart> will throw [Vue warn]: Unknown custom element: <RadCartesianChart> - did you register the component correctly?.

[mfferreira]

fyi, I was able to use it just doing:
$ yarn add nativescript-ui-chart

and adding this to main.js:

const ChartVue = require('nativescript-ui-chart/vue')

Scaffolding:
vue init nativescript-vue/vue-cli-template viva-native
⟩ tns --version: 4.2.4
⟩ vue --version: 3.0.5

[keithgulbroIT]

Hi everyone, I'm getting the following error after I follow the documentation and attempt to install the chart plugin, any assistance would be appreciated:

NativeScript debugger has opened inspector socket on port 18183 for keg.nativescript.cryptotoday. ***** Fatal JavaScript exception - application has been terminated. ***** Native stack trace: 1 0x10082cc1f NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool, bool) 2 0x100861caf -[TNSRuntime executeModule:referredBy:] 3 0x1002751d3 main 4 0x104496575 start 5 0x2 JavaScript stack trace: 1 use@file:///app/vendor.js:51804:22 2 @file:///app/bundle.js:1476:60 3 ./main.js@file:///app/bundle.js:1491:34 4 __webpack_require__@file:///app/bundle.js:76:34 5 checkDeferredModules@file:///app/bundle.js:45:42 6 @file:///app/bundle.js:149:38 7 anonymous@file:///app/bundle.js:150:12 8 evaluate@[native code] 9 moduleEvaluation@[native code] 10 @[native code] 11 promiseReactionJob@[native code] 12 require@[native code] 13 anonymous@file:///app/starter.js:2:8 14 evaluate@[native code] 15 moduleEvaluation@[native code] 16 @[native code] 17 promiseReactionJob@[native code] JavaScript error: file:///app/vendor.js:51804:22: JS ERROR TypeError: undefined is not an object (evaluating 'plugin.install') (CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: undefined is not an object (evaluating 'plugin.install') at 1 use@file:///app/vendor.js:51804:22 2 @file:///app/bundle.js:1476:60 3 ./main.js@file:///app/bundle.js:1491:34 4 __webpack_require__@file:///app/bundle.js:76:34 5 checkDeferredModules@file:///app/bundle.js:45:42 6 @file:///app/bundle.js:149:38 7 anonymous@file:///app/bundle.js:150:12 8 evaluate@[native code] 9 moduleEvaluation@[native code] 10 @[native code] 11 promiseReactionJob@[native code] 12 require@[native code] 13 anonymous@file:///app/starter.js:2:8 14 evaluate@[native code] 15 moduleEvaluation@[native code] 16 @[native code] 17 promiseReactionJob@[native code] ', reason: '(null)' *** First throw call stack: ( 0 CoreFoundation 0x0000000103ecc1bb __exceptionPreprocess + 331 1 libobjc.A.dylib 0x0000000102cdc735 objc_exception_throw + 48 2 NativeScript <…>

[jaasaria]

any update on this? working on ns-5 but still cant use this plugins. already tried the ff links but still no luck.
https://docs.telerik.com/devtools/nativescript-ui/Controls/Vue/getting-started
https://docs.telerik.com/devtools/nativescript-ui/Controls/Vue/Chart/getting-started

[msaelices]

@jaasaria, I've just added a Chart sample to my demo app here: https://github.com/msaelices/ns-ui-vue-demo/commit/645512916ff5e8900a01efd01d1f96fd0aeceb6f and it's working great.

Also, I've created a new NS-vue app from scratch and added a chart without any problem. My steps were the following ones:

• Create a new project following the NS-vue quick start.

$ npm install -g @vue/cli @vue/cli-init
$ vue init nativescript-vue/vue-cli-template chart-demo
$ cd chart-demo
$ npm install

• Add nativescript-ui-chart dependency:

$ npm install nativescript-ui-chart --save

• Install the chart Vue plugin:

import RadChart from 'nativescript-ui-chart/vue'

Vue.use(RadChart)

• Change the App.vue component to show a chart:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!"/>
    <RadCartesianChart>
      <BarSeries v-tkCartesianSeries
                 categoryProperty="Country"
                 valueProperty="Amount"
                 :items="items" />
      <CategoricalAxis v-tkCartesianHorizontalAxis />
      <LinearAxis v-tkCartesianVerticalAxis />
    </RadCartesianChart>
  </Page>
</template>

<script>
  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(),
      }
    }
  }
</script>

<style scoped>
    ActionBar {
        background-color: #53ba82;
        color: #ffffff;
    }
</style>

• Execute the app on Android:

tns run android --bundle

[elena-p]

You can refer to the latest version of the NativeScript UI Vue demos here.