DEV Community

Keiji Matsuzaki
Keiji Matsuzaki

Posted on

NativeScript and Vue.js

#vue #nativescript #todayilearned

NativeScript and Vue.js

image

NativeScript is supporting of cross platform for iOS and Android. With consisted of front-end platform solution.

Setup

Reference is this blog post.

> npm install -g nativescript
Enter fullscreen mode Exit fullscreen mode

After added command is tns.

> which tns
/Users/futoase/.nodenv/shims/tns
Enter fullscreen mode Exit fullscreen mode

Create sample product (directory).

> tns create sample-project
Enter fullscreen mode Exit fullscreen mode

Install nativescript-vue-plugin

> cd sample-project/
> npm install --save nativescript-vue
Enter fullscreen mode Exit fullscreen mode

Edit of app.js (Reference from Sample)

const Vue = require('nativescript-vue/dist/index');

new Vue({
  template: `
    <page>
      <stack-layout>
        <label text="Hello Vue!" style="background-color:#41b883;color:#ffffff;padding:10;text-align:center"></label>
      </stack-layout>
    </page>
  `,
}).$start();
Enter fullscreen mode Exit fullscreen mode

Running on Emulator

iOS 

> tns run ios
Enter fullscreen mode Exit fullscreen mode

image

Android

compile error

            try {
                // different java has different format for `java -version` command
                const output = (await this.$childProcess.spawnFromEvent("java", ["-version"], "exit")).stderr;
                this.javaVerCache = /(?:openjdk|java) version \"((?:\d+\.)+(?:\d+))/i.exec(output)[1];
            } catch (e) {
                this.javaVerCache = null;
            }
Enter fullscreen mode Exit fullscreen mode

Opened issue. issues#3148

error

Because Java 9 output version number from Stdout, But should be get version number from stdout in code...

Reference

Top comments (0)

Read next

wszgrcy profile image

Call Vue library in Angular

wszgrcy -

sarveshk76 profile image

Localize Your Vue: Internationalization with Nuxt 3

Sarvesh S. Kulkarni -

jackdomleo7 profile image

How to Protect State in Pinia

Jack Domleo -

bcostaaa01 profile image

Vue Composables: what are they, and how to create & use one

Bruno -