Playing With the Code

So, to begin. Open up the app.js file in Playgrounds and delete everything but the <ActionBar /> component. NativeScript needs a base “view” just like Vue.js needs a root element. We’re going to use the <StackLayout /> component, so when you keep adding components inside, they just stack on top of each other. Let’s add a few things before building an interface.

app.js

const Vue = require("nativescript-vue");

new Vue({

  template: `
    <Page class="page">
      <ActionBar title="Home" class="action-bar" />
      <StackLayout backgroundColor="#3c495e">

      </StackLayout>
    </Page>
  `,

}).$start();

First, let’s add a <WebView />. This WebView view is like an <iframe> in the front-end web developer world; it’s a window into a website.

<WebView height="1600px" src="http://bleedingedgepress.com/...