ar-vue.md

nativescript-ar with Vue

🔙

Demo app

Check out the Solar System demo app, which is an example of World tracking.

Declaring the <AR> view

Open your main.ts and add:

(<any>Vue).registerElement('AR', () => require('nativescript-ar').AR);

Open a .vue file and add something like this (simplified):

<template>
  <Page @loaded="pageLoaded">
    <ActionBar title="Welcome to NativeScript-Vue!"></ActionBar>
    <GridLayout columns="*" rows="*">
      <AR
          debugLevel="FEATURE_POINTS"
          planeDetection="HORIZONTAL"
          showStatistics="true"
          @arLoaded="arLoaded"
          @planeTapped="addSomethingToThePlane">
      </AR>
    </GridLayout>
  </Page>
</template>

<script lang="ts">
  import { AR } from "nativescript-ar";

  export default {
    methods: {
      arLoaded(arLoadedEventData) {
        console.log(">> AR Loaded! Object: " + arLoadedEventData.object);
        const ar: AR = arLoadedEventData.object;
        // do something with the 'ar' object.. see 'addSomethingToThePlane' below 
      },

      addSomethingToThePlane(arPlaneTappedEventData) {
        const ar: AR = arPlaneTappedEventData.object;
        ar.addNode({
          position: {
            x: arPlaneTappedEventData.position.x,
            y: arPlaneTappedEventData.position.y + 0.1, // half a meter above the plane we tapped
            z: arPlaneTappedEventData.position.z
          }
        }).then(node => console.log("node added: " + node))
      }
    }
  }
</script>

Continue reading

• World tracking: augment the world around you
• Face tracking: augment a face
• Image tracking: augment 2D images your camera finds