vue-wni

Vue Plugin for Web-Native Interface

Vue Web-Native Inteface

In today's world of software development, the need for seamless integration between web and native components is a common requirement. However, the methods for handling this interface can vary between different platforms, such as iOS and Android. To address this issue, standardized modules have been created to simplify the process and provide a consistent method for communication between web and native components.

These modules allow for the transmission of commands from the web to the native component and the receipt of processing results, making it easier for developers to build and manage the interface between their web and native components. With a standardized approach, developers can be confident that their software will work consistently and efficiently across different platforms.

Whether you are working on a large, complex project or a smaller, simpler one, these web-native interface modules are a valuable tool that can help you achieve your goals with ease.

How It Works

import VueWNInterface from "vue-wni";

const plugin = {
  install: (app: any, options: any) => {
    app.use(VueWNInterface);
  },
};

export default plugin;

<script lang="ts" setup>
import { WNInterface } from "vue-wni"; 

const wni = WNInterface;

wni.onReady((e) => {
  wni.onAppear((e) => {

  });
});
</script>

<script lang="ts">
import { WNInterface } from "vue-wni"; 
export default {
  methods: {
    initWNInterface() {
      this.$wni.onReady((e) => {
        this.$wni.onAppear((e) => {
          // 화면이 노출될 때 
        });
      });
    },
  },
  async mounted() {
    if (this.$wni.isNative) {
      await this.initWNInterface();
    }
  }
};
</script>