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

abhay_yt_52a8e72b213be229 profile image

Streamlining Your Workflow: Docker and GitLab CI/CD Integration

Abhay Singh Kathayat -

spicecoder profile image

It is time to express your intention ,before you really code

pronab pal -

airabbit profile image

Creating a Novel Outline Template in Notion: A Comprehensive Guide

AIRabbit -

gokulramakrishnan profile image

5 Frontend Development Myths That Need to Die in 2024

Gokul Ramakrishnan -