Clean up template to showcase usage of components

Author: rigor789

README.md

@@ -4,9 +4,10 @@ This repo serves as the starting point for NativeScript + Vue.js projects, using
 
 ## Usage
 
-1. Install NativeScript tools (see http://docs.nativescript.org/start/quick-setup)
+1.  Install NativeScript tools (see http://docs.nativescript.org/start/quick-setup)
+
+2.  Create app from this template
 
-2. Create app from this template
 ```bash
 tns create hello-ns-vue --template nativescript-vue-template
 
@@ -16,7 +17,8 @@ cd hello-ns-vue
 > While the `nativescript-vue` project is not up-to-date on npm, you may have to run
 > `npm link nativescript-vue` in the project folder (like [described here](https://github.com/rigor789/nativescript-vue/blob/master/CONTRIBUTING.md)).
 
-3. Run in Android or iOS
+3.  Run in Android or iOS
+
 ```bash
 tns run android
 tns run ios

app-with-list-view.js

@@ -1,11 +1 @@
 @import 'nativescript-theme-core/css/core.light.css';
-
-/* Your CSS goes here */
-
-.even {
-    color: red;
-}
-
-.odd {
-    color: blue;
-}

app-with-router.js

@@ -0,0 +1,26 @@
+const Counter = require('./Counter');
+
+module.exports = {
+  data() {
+    return {
+      surprise: false,
+    };
+  },
+  template: `
+    <Page class="page">
+      <ActionBar class="action-bar" title="NativeScript-Vue"/>
+  
+      <StackLayout>
+        <Counter />
+      
+        <Label class="p-20" textWrap=true text="This is a hello world application, tap the button if you dare"/>
+      
+        <Button class="btn btn-primary" @tap="surprise = !surprise" text="Tap me!"/>
+        <Image v-if="surprise" class="m-20" src="~/images/NativeScript-Vue.png"/>
+      </StackLayout>
+    </Page>
+  `,
+  components: {
+    Counter,
+  },
+};

app-with-tab-view.js

@@ -0,0 +1,33 @@
+module.exports = {
+  data() {
+    return {
+      count: 42,
+    };
+  },
+  computed: {
+    message() {
+      return this.count > 0
+        ? `Tap tap tap! Only ${this.count} left!`
+        : `Whoa! Slow down, we have hit the limit...`;
+    },
+  },
+  template: `
+    <StackLayout>
+      <FlexboxLayout flexDirection="row" justifyContent="center">
+        <Button @tap="decrement" text="-" class="btn btn-outline"/>
+        <Label :text="count" alignSelf="baseline" class="h2"/>
+        <Button @tap="increment" text="+" class="btn btn-outline"/>
+      </FlexboxLayout>
+      
+      <Label class="p-20" :text="message"/>
+    </StackLayout>
+  `,
+  methods: {
+    increment() {
+      this.count += 1;
+    },
+    decrement() {
+      this.count -= 1;
+    },
+  },
+};