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

dharamgfx profile image

The Battle of the Frameworks: Who's Really Winning the JavaScript War?

Dharmendra Kumar -

jeromemare profile image

How to create a pronunciation assessment App (Part 1)

Jérôme M -

dharamgfx profile image

General Coding Standards for Vue js.

Dharmendra Kumar -

mrlinxed profile image

Nexus - An analytics tool for Threads

Mr. Linxed -