DEV Community

Keiji Matsuzaki
Keiji Matsuzaki

Posted on

4

NativeScript and Vue.js

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more