diff --git a/meta.js b/meta.js
index edaba8a..74d1416 100644
--- a/meta.js
+++ b/meta.js
@@ -78,18 +78,35 @@ module.exports = {
       default: 'MIT',
       when: '!inPlace',
     },
-    router: {
-      type: 'confirm',
-      label: 'Install vue-router? (experimental)',
-      default: false,
+    preset: {
+      type: 'list',
+      label: 'Select a preset (more coming soon)',
+      choices: [
+        'Simple',
+        'TabView',
+        'SideDrawer',
+      ],
+      default: 'Simple',
       when: '!inPlace',
     },
+    // router: {
+    //   type: 'confirm',
+    //   label: 'Install vue-router? (experimental)',
+    //   default: false,
+    //   when: '!inPlace',
+    // },
     store: {
       type: 'confirm',
       label: 'Install vuex? (state management)',
       default: false,
       when: '!inPlace',
     },
+    devtools: {
+      type: 'confirm',
+      label: 'Install vue-devtools?',
+      default: true,
+      when: '!inPlace',
+    },
     color_scheme: {
       type: 'list',
       label: 'Color scheme',
diff --git a/template/app/App_Resources/Android/src/main/res/values/colors.xml b/template/app/App_Resources/Android/src/main/res/values/colors.xml
index 74ad882..2d0390d 100644
--- a/template/app/App_Resources/Android/src/main/res/values/colors.xml
+++ b/template/app/App_Resources/Android/src/main/res/values/colors.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="ns_primary">#F5F5F5</color>
-	<color name="ns_primaryDark">#757575</color>
-	<color name="ns_accent">#33B5E5</color>
+    <color name="ns_primaryDark">#53ba82</color>
+    <color name="ns_accent">#33B5E5</color>
     <color name="ns_blue">#272734</color>
-</resources>
\ No newline at end of file
+</resources>
diff --git a/template/app/components/App.vue b/template/app/components/App.vue
new file mode 100644
index 0000000..67b0592
--- /dev/null
+++ b/template/app/components/App.vue
@@ -0,0 +1,146 @@
+{{#if_eq preset "Simple"}}<template>
+    <Page>
+        <ActionBar title="Welcome to NativeScript-Vue!"/>
+        <GridLayout colums="*" rows="*">
+            <Label class="message" :text="msg" col="0" row="0"/>
+        </GridLayout>
+    </Page>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        msg: 'Hello World!'
+      }
+    }
+  }
+</script>
+
+<style scoped>
+    ActionBar {
+        background-color: #53ba82;
+        color: #ffffff;
+    }
+
+    .message {
+        vertical-align: center;
+        text-align: center;
+        font-size: 20;
+        color: #333333;
+    }
+</style>{{/if_eq}}{{#if_eq preset "TabView"}}<template>
+    <Page>
+        <ActionBar title="Welcome to NativeScript-Vue!" android:flat="true"/>
+        <TabView android:tabBackgroundColor="#53ba82"
+                 android:tabTextColor="#c4ffdf"
+                 android:selectedTabTextColor="#ffffff"
+                 androidSelectedTabHighlightColor="#ffffff">
+            <TabViewItem title="Tab 1">
+                <GridLayout colums="*" rows="*">
+                    <Label class="message" :text="msg" col="0" row="0"/>
+                </GridLayout>
+            </TabViewItem>
+            <TabViewItem title="Tab 2">
+                <GridLayout colums="*" rows="*">
+                    <Label class="message" text="Tab 2 Content" col="0" row="0"/>
+                </GridLayout>
+            </TabViewItem>
+            <TabViewItem title="Tab 3">
+                <GridLayout colums="*" rows="*">
+                    <Label class="message" text="Tab 3 Content" col="0" row="0"/>
+                </GridLayout>
+            </TabViewItem>
+        </TabView>
+    </Page>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        msg: 'Hello World!'
+      }
+    }
+  }
+</script>
+
+<style scoped>
+    ActionBar {
+        background-color: #53ba82;
+        color: #ffffff;
+    }
+
+    .message {
+        vertical-align: center;
+        text-align: center;
+        font-size: 20;
+        color: #333333;
+    }
+</style>{{/if_eq}}{{#if_eq preset "SideDrawer"}}<template>
+    <Page>
+        <ActionBar>
+            <GridLayout width="100%" columns="auto, *">
+                <Label text="MENU" @tap="$refs.drawer.nativeView.showDrawer()" col="0"/>
+                <Label class="title" text="Welcome to NativeScript-Vue!"  col="1"/>
+            </GridLayout>
+        </ActionBar>
+
+        <RadSideDrawer ref="drawer">
+            <StackLayout ~drawerContent backgroundColor="#ffffff">
+                <Label class="drawer-header" text="Drawer"/>
+
+                <Label class="drawer-item" text="Item 1"/>
+                <Label class="drawer-item" text="Item 2"/>
+                <Label class="drawer-item" text="Item 3"/>
+            </StackLayout>
+
+            <GridLayout ~mainContent colums="*" rows="*">
+                <Label class="message" :text="msg" col="0" row="0"/>
+            </GridLayout>
+        </RadSideDrawer>
+    </Page>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        msg: 'Hello World!'
+      }
+    }
+  }
+</script>
+
+<style scoped>
+    ActionBar {
+        background-color: #53ba82;
+        color: #ffffff;
+    }
+
+    .title {
+        text-align: left;
+        padding-left: 16;
+    }
+
+    .message {
+        vertical-align: center;
+        text-align: center;
+        font-size: 20;
+        color: #333333;
+    }
+
+    .drawer-header {
+        padding: 50 16 16 16;
+        margin-bottom: 16;
+        background-color: #53ba82;
+        color: #ffffff;
+        font-size: 24;
+    }
+
+    .drawer-item {
+        padding: 8 16;
+        color: #333333;
+        font-size: 16;
+    }
+</style>{{/if_eq}}
diff --git a/template/app/components/Counter.vue b/template/app/components/Counter.vue
deleted file mode 100644
index baf0b24..0000000
--- a/template/app/components/Counter.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <Page class="page">
-    <ActionBar class="action-bar" title="Counter">
-      {{#router}}
-      <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$router.push('/home')"/>
-      {{/router}}
-    </ActionBar>
-
-    <StackLayout>
-      <FlexboxLayout flexDirection="row" justifyContent="center">
-        <Button @tap="decrement" text="-" class="btn btn-outline"/>
-        <Label :text="message" alignSelf="baseline" class="h2"/>
-        <Button @tap="increment" text="+" class="btn btn-outline"/>
-      </FlexboxLayout>
-      <Image v-if="surprise" src="~/assets/images/NativeScript-Vue.png"/>
-    </StackLayout>
-
-  </Page>
-</template>
-
-<script>
-  import { mapActions } from 'vuex';
-
-  export default {
-    computed: {
-      message () {
-        return this.$store.state.counter.count.toString();
-      },
-      surprise () {
-        return (this.$store.state.counter.count >= 5);
-      },
-    },
-    methods: mapActions([
-      'decrement',
-      'increment',
-    ]),
-  };
-</script>
diff --git a/template/app/components/HelloWorld.vue b/template/app/components/HelloWorld.vue
deleted file mode 100644
index f180a3b..0000000
--- a/template/app/components/HelloWorld.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <Page class="page">
-    <ActionBar class="action-bar" title="Hello world">
-      {{#router}}
-      <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$router.push('/home')"/>
-      {{/router}}
-    </ActionBar>
-
-    <StackLayout class="hello-world">
-      <Label class="body" textWrap=true text="This is a hello world component, tap the button if you dare"/>
-
-      <Button class="btn btn-primary" @tap="surprise = !surprise" :text="title"/>
-      <Image v-if="surprise" src="~/assets/images/NativeScript-Vue.png"/>
-
-    </StackLayout>
-
-  </Page>
-</template>
-
-<script>
-  export default {
-    data () {
-      return {
-        surprise: false,
-        title: "Tap me!"
-      };
-    },
-  };
-</script>
-
-<style scoped>
-  .hello-world {
-    margin: 20;
-  }
-
-  Label {
-    color: red;
-  }
-</style>
diff --git a/template/app/components/Home.vue b/template/app/components/Home.vue
deleted file mode 100644
index 39ebae6..0000000
--- a/template/app/components/Home.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <Page class="page">
-    <ActionBar class="action-bar" title="Home"/>
-
-    <StackLayout>
-      {{#store}}
-      <Button class="btn btn-primary" @tap="$router.push('/counter')">Counter</Button>
-      {{/store}}
-      <Button class="btn btn-primary" @tap="$router.push('/hello')">Hello World</Button>
-    </StackLayout>
-
-  </Page>
-</template>
diff --git a/template/app/main.js b/template/app/main.js
index 3cd8c34..d80a587 100644
--- a/template/app/main.js
+++ b/template/app/main.js
@@ -1,35 +1,14 @@
-import Vue from 'nativescript-vue';
-
-{{#router}}
-import router from './router';
-{{else}}
-{{#store}}
-import Counter from './components/Counter';
-{{else}}
-import HelloWorld from './components/HelloWorld';
-{{/store}}
-{{/router}}
-
-{{#store}}
-import store from './store';
-{{/store}}
-
-import './styles.scss';
-
+import Vue from 'nativescript-vue'
+import App from './components/App'
+{{#devtools}}import VueDevtools from 'nativescript-vue-devtools'
+
+if(TNS_ENV !== 'production') {
+  Vue.use(VueDevtools)
+}
+{{/devtools}}
 // Prints Vue logs when --env.production is *NOT* set while building
-Vue.config.silent = (TNS_ENV === 'production');
+Vue.config.silent = (TNS_ENV === 'production')
 
 new Vue({
-
-  {{#router}}
-  router,
-  template: `<Frame><router-view/></Frame>`,
-  {{else}}
-  render: h => h('frame',[h({{#store}}Counter{{else}}HelloWorld{{/store}})]),
-  {{/router}}
-
-  {{#store}}
-  store,
-  {{/store}}
-
-}).$start();
+  render: h => h('frame', [h(App)])
+}).$start()
diff --git a/template/app/router/index.js b/template/app/router/index.js
deleted file mode 100644
index 268f39d..0000000
--- a/template/app/router/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import Vue from 'nativescript-vue';
-import VueRouter from 'vue-router';
-
-Vue.use(VueRouter);
-
-import Home from '../components/Home';
-import HelloWorld from '../components/HelloWorld';
-{{#store}}
-import Counter from '../components/Counter';
-{{/store}}
-
-const router = new VueRouter({
-  routes: [
-    {
-      path: '/home',
-      component: Home,
-      meta: {
-        title: 'Home',
-      },
-    },
-    {
-      path: '/hello',
-      component: HelloWorld,
-      meta: {
-        title: 'Hello World',
-      },
-    },
-    {{#store}}
-    {
-      path: '/counter',
-      component: Counter,
-      meta: {
-        title: 'Counter',
-      },
-    },
-    {{/store}}
-    {path: '*', redirect: '/home'},
-  ],
-});
-
-router.replace('/home');
-
-export default router;
diff --git a/template/app/store/index.js b/template/app/store/index.js
deleted file mode 100644
index 4ad9aef..0000000
--- a/template/app/store/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Vue from 'nativescript-vue';
-import Vuex from 'vuex';
-
-import counter from './modules/counter';
-
-Vue.use(Vuex);
-
-const debug = process.env.NODE_ENV !== 'production';
-
-const store = new Vuex.Store({
-  modules: {
-    counter,
-  },
-  strict: (TNS_ENV === 'debug'),
-});
-
-Vue.prototype.$store = store;
-
-export default store;
diff --git a/template/app/store/modules/counter.js b/template/app/store/modules/counter.js
deleted file mode 100644
index deedebd..0000000
--- a/template/app/store/modules/counter.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const state = {
-  count: 0,
-};
-
-const mutations = {
-  decrement (state) {
-    state.count--;
-  },
-  increment (state) {
-    state.count++;
-  },
-};
-
-const actions = {
-  increment: ({commit}) => commit('increment'),
-  decrement: ({commit}) => commit('decrement'),
-};
-
-export default {
-  state,
-  mutations,
-  actions,
-};
diff --git a/template/package.json b/template/package.json
index a12f622..f733458 100644
--- a/template/package.json
+++ b/template/package.json
@@ -13,15 +13,15 @@
       "version": "4.2.0"
     }
   },
-  "dependencies": {
-    {{#router}}
-    "vue-router": "^3.0.1",
-    {{/router}}
-    {{#store}}
-    "vuex": "^3.0.1",
-    {{/store}}
+  "dependencies": { {{#store}}
+    "vuex": "^3.0.1",{{/store}}{{#devtools}}
+    "@vue/devtools": "5.0.0-beta.3",
+    "nativescript-socket.io": "^0.9.0",
+    "nativescript-vue-devtools": "^1.0.0",
+    "nativescript-toast": "^1.4.6",{{/devtools}}{{#if_eq preset "SideDrawer"}}
+    "nativescript-ui-sidedrawer": "^4.3.0",{{/if_eq}}
     "nativescript-theme-core": "^1.0.4",
-    "nativescript-vue": "^2.0.0-alpha.3",
+    "nativescript-vue": "^2.0.0-rc.0",
     "tns-core-modules": "^4.2.0"
   },
   "devDependencies": {
@@ -37,7 +37,7 @@
     "css-loader": "^1.0.0",
     "lazy": "1.0.11",
     "mini-css-extract-plugin": "^0.4.1",
-    "nativescript-dev-webpack": "0.17.0-2018-09-15-02",
+    "nativescript-dev-webpack": "^0.17.0-2018-09-12-01",
     "nativescript-vue-template-compiler": "^2.0.0-alpha.3",
     "nativescript-worker-loader": "~0.9.0",
     "node-sass": "^4.9.2",