Nativescript Vue Core Modules

Question

I'm having trouble understanding how to use the Framework modules in nativescript-vue.

For example this module, is what I am trying to understand how to use: https://docs.nativescript.org/ns-framework-modules/platform

Do I need to declare in App.js / Main.js or in the component I'm going to use?

I come from Web Development with Vue.js, I think an implementation example I'm trying to follow would look like this:

It is an example of the web that I am thinking of being the same as the way of implementation in the mobile.

On the web if I needed to use Axios I would import it into App.js / Main.js to stay global in the application or SPF to stay local and be able to call in the desired components.

In mobile if I use pure nativescript the import is clear, but in nativescript-vue I can not understand how to use it, I do not know if it already comes configured by default or not.

score 0 · Answer 1 · answered Jun 19 '19 at 14:14

0

You should be able to use all the CommonJS Vue modules you used in Web, meaning it should not have any dependency over browser specific features.

You might still able to use Axios as it internally uses nothing but XMLHttpRequest, thats a valid global object in NativeScript environment.

If you have Vue module that depends on HTML Dom / document / window / local or session storage etc., then it might fail. FYI, there are plugins like nativescript-localstorage which simulates features like local / session storage.

answered Jun 19 '19 at 14:14

Manoj

21,753
3
20
41

You may use Axios just like you would in Vue on web. You will have to install the NPM module, import it and start using. If you like to use Vue Axious which allows interceptors, you could still code it the same way you would in web. You would put `Vue.use(VueAxios, axios)` in your entry file on web, so it will be available to all the components. Similarly you will put it here on `app.js` which I assume the entry point of your project where you would initialise your first UI component with `new Vue(...)` – Manoj Jun 19 '19 at 15:09

TomG · Accepted Answer · 2019-06-19T15:42:30.033

Import modules where you need them in your code, both app.js and SPF.

app.js

import axios from "axios";
var platform = require("tns-core-modules/platform");

var instance = axios.create({ baseURL: "https://myendpoint.com" });
if (platform.isAndroid) { /* ... */ }

File.vue

import axios from "axios";
var platform = require("tns-core-modules/platform");

export default {
    methods: {
        androidFunc() {
            if (platform.isIOS) {
                axios.get("https://website.com/api/ios") // ...
            }
        }
    }
}

If I need something globally, I usually use Vue instance properties (Vue.prototype.$myProperty) or Vuex store.

Nativescript Vue Core Modules

2 Answers2