nativescript-vue.org | NativeScript-Vue website | Mobile library

Make sure to either

Here is how you translate Swift into NativeScript

Update (30-Jan-2019): Good news - I think they are adding out-of-the-box support for Typescript with the template in this PR.

So from now on we should be able to choose Typescript as the language option when bootstrapping the project with the template.

I had encountered the same problem and here is what I did to add TypeScript to my Nativescript-Vue project. (I do not have enough reputation to add a comment so I have to post this as an answer)

1. Create the project with vue init nativescript-vue/vue-cli-template
   • There is a warning about webpack.config.js during the project creation and I was asked to run ./node_modules/.bin/update-ns-webpack --configs
   • Vue Devtools does not work with tns preview so I had disabled it as well
2. Add the following:
   • Install typescript and vue as devDependencies
   • Rename app/main.js to app/main.ts
   • In app/main.ts, change import App from './components/App' to import App from './components/App.vue'
   • Add tsconfig.json (copied from this stater project AND commented out "strict": true,)
   • In webpack.config.js, add 'vue$': 'nativescript-vue' under alias and exclude: /node_modules|vue\/src/, under module.rules (to the one for ts - details here)
   • As you has mentioned in your step 3 and 4, I had also created the env.d.ts and shims.vue.d.ts under types/ folder accordingly (Note that in the tsconfig.json file I copied, it had defined "typeRoots": ["types"])
3. I had tested it with tns preview --bundle
   • The app is running fine on my android phone (no errors, changes can be seen on the phone)
   • if necessary, I can test that if it would work with the command tns run android --bundle

Hope the above can help.

Versions used are as follow:

• Nativescript CLI: 5.1.0
• nativescript-vue: 2.0.2
• webpack: 4.28.3

1. This is the git commit I did in order to add TypeScript to the project.
2. The official blog post about adding TypeScript to nativescript-vue - It was very helpful but unfortunately it did not work immediately after following those steps (maybe because I had used a different vue-init template)
3. And of course kudos to the detailed steps listed in this stack overflow question which had given me the direction to fix my project :-)

It turns out Vue.prototype.$navigateTo(Test) was the correct answer

It was a miss leading of documentation. There is no API called prompt. It should be dialogs.prompt. Correct example

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

These can be turned off via

Vue-Native is nothing but a wrapper around ReactNative. So the question becomes ReactNative vs NativeScript?

In my opinion, it's NativeScript.

• Supports frameworks like Angular & Vue
• Works with Core JavaScript / TypeScript too
• Better code sharing
• 100% access to native apis

ReactNative got a huge community and range of plugins, but the problem beings when you want to customise. Every app is unique in it's own way, it becomes really hard to customise a plugin for your own needs at least until you have good exposure to Objective C / Java and handle your own forks etc.,

With NativeScript you can always access the native objects & apis form JavaScript, simply write overrides on plugins within your project if you want to customise anything.

Here are few blog posts & videos those compare these frameworks.

• Would Airbnb Have Fared Better With NativeScript Instead of React Native?
• ReactNative vs NativeScript

Creator of nativescript-vue-global-drawer plugin here.

The frame slot of GlobalDrawer contains a Frame element (here) to control navigation inside the drawer as stated here, which means the slot accept only Page elements.

The solution that @sidheart pointed out works but it will not let you observe the store. The error is triggered because NativeScript does not have a DOM and therefore has no types for HTMLElement. A temporary solution is to add the line below to the object defined by new webpack.DefinePlugin({}) in the file webpack.config.js: