Search code examples
typescriptnativescriptvue-clinativescript-vuevue-devtools

What is proper way of starting a new nativescript-vue project with Typescript support?


I want to be able to use Typescript inside Vue instance methods, as documented in blog page of nativescript-vue.org

When I create a new nativescript-vue project with vue init nativescript-vue/vue-cli-template <project-name> following warnings appear in the debug screen.

tns debug android

Always give the following error lines...

JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> CreateElement(NativePage)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> CreateElement(NativeActionBar)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> AppendChild(ElementNode(nativepage), ElementNode(nativeactionbar))'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> CreateElement(nativegridlayout)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> CreateElement(nativelabel)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> AppendChild(ElementNode(nativegridlayout), ElementNode(nativelabel))'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> AppendChild(ElementNode(nativepage), ElementNode(nativegridlayout))'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> AppendChild(ElementNode(nativeframe), ElementNode(nativepage))'

What are these boilerplate warnings starting with JS:... lines?


UPDATE

JS error lines started after I added @vue/devtools nativescript-toasty nativescript-socketio nativescript-vue-devtools

Even I remove them console warnings are stil there.


I was wondering, if quick start page is outdated? Since Vue-cli-template did not get any updates in last 30 days.

NOTE: Projects created with tns create does not give such errors. Only vue-cli-template has warnings.


Solution

  • The mentioned lines in the log are not errors nor warnings - they are renderer logs.

    These can be turned off via

    Vue.config.silent = true
    
    // Since NativeScript-Vue 2.5.0-alpha.3 the renderer logs
    // can be disabled keeping other useful logs intact via
    Vue.config.suppressRenderLogs = false
    

    in app.js or main.js (depending on the template used).