feat: add drawer vue template

README.md

@@ -4,7 +4,7 @@ App templates help you jump start your native cross-platform apps with built-in
 This monorepo contains the following NativeScript app templates:
 - Hello World ([JavaScript](/packages/template-hello-world), [TypeScript](/packages/template-hello-world-ts), and [Angular](/packages/template-hello-world-ng))
 - Blank ([JavaScript](/packages/template-blank), [TypeScript](/packages/template-blank-ts), [Angular](/packages/template-blank-ng), and [Vue](/packages/template-blank-vue))
-- Drawer Navigation ([JavaScript](/packages/template-drawer-navigation), [TypeScript](/packages/template-drawer-navigation-ts), and [Angular](/packages/template-drawer-navigation-ng))
+- Drawer Navigation ([JavaScript](/packages/template-drawer-navigation), [TypeScript](/packages/template-drawer-navigation-ts), [Angular](/packages/template-drawer-navigation-ng), and [Vue](/packages/template-drawer-navigation-vue))
 - Tab Navigation ([JavaScript](/packages/template-tab-navigation), [TypeScript](/packages/template-tab-navigation-ts), and [Angular](/packages/template-tab-navigation-ng))
 - Master Detail with Firebase ([JavaScript](/packages/template-master-detail), [TypeScript](/packages/template-master-detail-ts), [Angular](/packages/template-master-detail-ng), and [Vue](/packages/template-master-detail-vue))
 - Master Detail with Kinvey ([JavaScript](/packages/template-master-detail-kinvey), [TypeScript](/packages/template-master-detail-kinvey-ts), and [Angular](/packages/template-master-detail-kinvey-ng))

packages/template-drawer-navigation-vue/.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+
+[*.json]
+indent_style = space
+indent_size = 2
+
+[*.js]
+indent_style = space
+indent_size = 4

packages/template-drawer-navigation-vue/.gitignore

@@ -0,0 +1,15 @@
+npm-debug.log
+.DS_Store
+
+webpack.config.js
+hooks/*
+!hooks/after-createProject/after-createProject.js
+*.js.map
+lib/
+node_modules/
+platforms/
+tmp/
+typings/
+.idea
+.project
+.vscode

packages/template-drawer-navigation-vue/.npmignore

@@ -0,0 +1,18 @@
+npm-debug.log
+.DS_Store
+
+webpack.config.js
+hooks/*
+!hooks/after-createProject/after-createProject.js
+*.js.map
+lib/
+node_modules/
+platforms/
+tmp/
+typings/
+.idea
+.project
+.vscode
+.npmrc
+
+tools/assets/

packages/template-drawer-navigation-vue/README.md

@@ -0,0 +1,82 @@
+# NativeScript with Vue Drawer Navigation Template
+
+App templates help you jump start your native cross-platform apps with built-in UI elements and best practices. Save time writing boilerplate code over and over again when you create new apps.
+
+App template featuring a RadSideDrawer component for navigation. The RadSideDrawer component is part of [Progress NativeScript UI](https://github.com/telerik/nativescript-ui-feedback).
+
+<img src="/packages/template-drawer-navigation-vue/tools/assets/phone-drawer-ios.png" height="400" /> <img src="/packages/template-drawer-navigation-vue/tools/assets/phone-drawer-android.png" height="400" />
+
+## Key Features
+
+- Side drawer navigation
+- Five blank pages hooked to the drawer navigation
+- Customizable theme
+- UX and development best practices
+- Easy to understand code
+
+## Quick Start
+
+Execute the following command to create an app from this template:
+
+``` shell
+tns create my-drawer-vue --template tns-template-drawer-navigation-vue
+```
+
+> Note: This command will create a new NativeScript app that uses the latest version of this template published to [npm](https://www.npmjs.com/package/tns-template-drawer-navigation-vue).
+
+If you want to create a new app that uses the source of the template from the `master` branch, you can execute the following:
+
+``` shell
+# clone nativescript-app-templates monorepo locally
+git clone git@github.com:NativeScript/nativescript-app-templates.git
+
+# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
+tns create my-drawer-vue --template nativescript-app-templates/packages/template-drawer-navigation-vue
+```
+
+**NB:** Please, have in mind that the master branch may refer to dependencies that are not on NPM yet!
+
+## Walkthrough
+
+### Architecture
+
+There is a component that is used for setting RadSideDrawer instance as an application starting point:
+
+- `/components/App.vue` - sets up the RadSideDrawer drawer content and defines navigation frame for the pages.
+
+RadSideDrawer has the following component structure:
+
+- `RadSideDrawer` - The component to display a drawer on the page.
+- `RadSideDrawer.drawerContent` - Part of the RadSideDrawer, it holds a slot `drawerContent` that displays the contents of the drawer.
+- `RadSideDrawer.mainContent` - Part of the RadSideDrawer, it holds the main content for the page.
+
+The template has the following blank pages:
+
+- `/components/Home.vue`
+- `/components/Browse.vue`
+- `/components/Search.vue`
+- `/components/Featured.vue`
+- `/components/Settings.vue`
+
+### Styling
+
+This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the [documentation](https://docs.nativescript.org/angular/ui/theme.html#theme) to understand how to customize it. Check it out to see what classes you can use on which component.
+
+It has 4 global style files that are located at the root of the app folder:
+
+- `_app-variables.scss` - holds the global SASS variables that are imported on each component's styles.
+- `_app-common.scss` - the global common style sheet. These style rules are applied to both Android and iOS.
+- `app.android.scss` - the global Android style sheet. These style rules are applied to Android only.
+- `app.ios.scss` - the global iOS style sheet. These style rules are applied to iOS only.
+
+## Get Help
+
+The NativeScript framework has a vibrant community that can help when you run into problems.
+
+Try [joining the NativeScript community Slack](http://developer.telerik.com/wp-login.php?action=slack-invitation). The Slack channel is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.
+
+If you have found an issue with this template, please report the problem in the [NativeScript repository](https://github.com/NativeScript/NativeScript/issues).
+
+## Contributing
+
+We love PRs, and accept them gladly. Feel free to propose changes and new ideas. We will review and discuss, so that they can be accepted and better integrated.

packages/template-drawer-navigation-vue/app/App_Resources/Android/app.gradle

@@ -0,0 +1,20 @@
+// Add your native dependencies here:
+
+// Uncomment to add recyclerview-v7 dependency
+//dependencies {
+//	implementation 'com.android.support:recyclerview-v7:+'
+//}
+
+// If you want to add something to be applied before applying plugins' include.gradle files
+// e.g. project.ext.googlePlayServicesVersion = "15.0.1"
+// create a file named before-plugins.gradle in the current directory and place it there
+
+android {
+  defaultConfig {
+    minSdkVersion 17
+    generatedDensities = []
+  }
+  aaptOptions {
+    additionalParameters "--no-version-vectors"
+  }
+}

packages/template-drawer-navigation-vue/app/App_Resources/Android/src/main/AndroidManifest.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+	package="__PACKAGE__"
+	android:versionCode="10000"
+	android:versionName="1.0">
+
+	<supports-screens
+		android:smallScreens="true"
+		android:normalScreens="true"
+		android:largeScreens="true"
+		android:xlargeScreens="true"/>
+
+	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.INTERNET"/>
+
+	<application
+		android:name="com.tns.NativeScriptApplication"
+		android:allowBackup="true"
+		android:icon="@drawable/icon"
+		android:label="@string/app_name"
+		android:theme="@style/AppTheme">
+
+		<activity
+			android:name="com.tns.NativeScriptActivity"
+			android:label="@string/title_activity_kimera"
+			android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
+			android:theme="@style/LaunchScreenTheme">
+
+			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
+
+			<intent-filter>
+				<action android:name="android.intent.action.MAIN" />
+				<category android:name="android.intent.category.LAUNCHER" />
+			</intent-filter>
+		</activity>
+		<activity android:name="com.tns.ErrorReportActivity"/>
+	</application>
+</manifest>

packages/template-drawer-navigation-vue/app/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml

@@ -0,0 +1,8 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="fill">
+    <item>
+        <bitmap android:gravity="fill" android:src="@drawable/background" />
+    </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/logo" />
+    </item>
+</layer-list>

packages/template-drawer-navigation-vue/app/App_Resources/Android/src/main/res/values-v21/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+	<color name="ns_accent">#3d5afe</color>
+</resources>

packages/template-drawer-navigation-vue/app/App_Resources/Android/src/main/res/values-v21/styles.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Application theme -->
+    <style name="AppTheme" parent="AppThemeBase">
+        <item name="android:datePickerStyle">@style/SpinnerDatePicker</item>
+        <item name="android:timePickerStyle">@style/SpinnerTimePicker</item>
+    </style>
+
+    <!-- Default style for DatePicker - in spinner mode -->
+    <style name="SpinnerDatePicker" parent="android:Widget.Material.Light.DatePicker">
+        <item name="android:datePickerMode">spinner</item>
+    </style>
+
+    <!-- Default style for TimePicker - in spinner mode -->
+    <style name="SpinnerTimePicker" parent="android:Widget.Material.Light.TimePicker">
+        <item name="android:timePickerMode">spinner</item>
+    </style>
+
+    <style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
+        <item name="android:elevation">4dp</item>
+    </style>
+</resources>

packages/template-drawer-navigation-vue/app/App_Resources/Android/src/main/res/values/colors.xml

@@ -0,0 +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_blue">#272734</color>
+</resources>

packages/template-drawer-navigation-vue/app/App_Resources/Android/src/main/res/values/styles.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- theme to use FOR launch screen-->
+    <style name="LaunchScreenThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
+
+        <item name="colorPrimary">@color/ns_primary</item>
+        <item name="colorPrimaryDark">@color/ns_primaryDark</item>
+        <item name="colorAccent">@color/ns_accent</item>
+
+        <item name="android:windowBackground">@drawable/splash_screen</item>
+        
+        <item name="android:windowActionBarOverlay">true</item>  
+        <item name="android:windowTranslucentStatus">true</item>
+    </style>
+
+    <style name="LaunchScreenTheme" parent="LaunchScreenThemeBase">
+    </style>
+
+    <!-- theme to use AFTER launch screen is loaded-->
+    <style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
+
+        <item name="colorPrimary">@color/ns_primary</item>
+        <item name="colorPrimaryDark">@color/ns_primaryDark</item>
+        <item name="colorAccent">@color/ns_accent</item>
+    </style>
+
+    <style name="AppTheme" parent="AppThemeBase">
+    </style>
+
+    <!-- theme for action-bar -->
+    <style name="NativeScriptToolbarStyleBase" parent="Widget.AppCompat.Toolbar">
+        <item name="android:background">@color/ns_primary</item>
+        <item name="theme">@style/ThemeOverlay.AppCompat.ActionBar</item>
+        <item name="popupTheme">@style/ThemeOverlay.AppCompat</item>
+    </style>
+
+    <style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
+    </style>
+</resources>

packages/template-drawer-navigation-vue/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,122 @@
+{
+  "images" : [
+    {
+      "size" : "20x20",
+      "idiom" : "iphone",
+      "filename" : "icon-20@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "20x20",
+      "idiom" : "iphone",
+      "filename" : "icon-20@3x.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "iphone",
+      "filename" : "icon-29.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "iphone",
+      "filename" : "icon-29@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "iphone",
+      "filename" : "icon-29@3x.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "iphone",
+      "filename" : "icon-40@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "iphone",
+      "filename" : "icon-40@3x.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "60x60",
+      "idiom" : "iphone",
+      "filename" : "icon-60@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "60x60",
+      "idiom" : "iphone",
+      "filename" : "icon-60@3x.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "20x20",
+      "idiom" : "ipad",
+      "filename" : "icon-20.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "20x20",
+      "idiom" : "ipad",
+      "filename" : "icon-20@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "ipad",
+      "filename" : "icon-29.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "ipad",
+      "filename" : "icon-29@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "ipad",
+      "filename" : "icon-40.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "ipad",
+      "filename" : "icon-40@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "76x76",
+      "idiom" : "ipad",
+      "filename" : "icon-76.png",
+      "scale" : "1x"
+    },
+    {
+      "size" : "76x76",
+      "idiom" : "ipad",
+      "filename" : "icon-76@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "83.5x83.5",
+      "idiom" : "ipad",
+      "filename" : "icon-83.5@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "1024x1024",
+      "idiom" : "ios-marketing",
+      "filename" : "icon-1024.png",
+      "scale" : "1x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

packages/template-drawer-navigation-vue/app/App_Resources/iOS/Assets.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

packages/template-drawer-navigation-vue/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Contents.json

@@ -0,0 +1,212 @@
+{
+  "images" : [
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "2688h",
+      "filename" : "Default-Portrait-XS-Max.png",
+      "minimum-system-version" : "12.0",
+      "orientation" : "portrait",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "2688h",
+      "filename" : "Default-Landscape-XS-Max.png",
+      "minimum-system-version" : "12.0",
+      "orientation" : "landscape",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "1792h",
+      "filename" : "Default-Portrait-XR.png",
+      "minimum-system-version" : "12.0",
+      "orientation" : "portrait",
+      "scale" : "2x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "1792h",
+      "filename" : "Default-Landscape-XR.png",
+      "minimum-system-version" : "12.0",
+      "orientation" : "landscape",
+      "scale" : "2x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "2436h",
+      "filename" : "Default-1125h.png",
+      "minimum-system-version" : "11.0",
+      "orientation" : "portrait",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "2436h",
+      "filename" : "Default-Landscape-X.png",
+      "minimum-system-version" : "11.0",
+      "orientation" : "landscape",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "736h",
+      "filename" : "Default-736h@3x.png",
+      "minimum-system-version" : "8.0",
+      "orientation" : "portrait",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "736h",
+      "filename" : "Default-Landscape@3x.png",
+      "minimum-system-version" : "8.0",
+      "orientation" : "landscape",
+      "scale" : "3x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "667h",
+      "filename" : "Default-667h@2x.png",
+      "minimum-system-version" : "8.0",
+      "orientation" : "portrait",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "iphone",
+      "filename" : "Default@2x.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "2x"
+    },
+    {
+      "extent" : "full-screen",
+      "idiom" : "iphone",
+      "subtype" : "retina4",
+      "filename" : "Default-568h@2x.png",
+      "minimum-system-version" : "7.0",
+      "orientation" : "portrait",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "filename" : "Default-Portrait.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "filename" : "Default-Landscape.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "filename" : "Default-Portrait@2x.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "filename" : "Default-Landscape@2x.png",
+      "extent" : "full-screen",
+      "minimum-system-version" : "7.0",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "iphone",
+      "filename" : "Default.png",
+      "extent" : "full-screen",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "iphone",
+      "filename" : "Default@2x.png",
+      "extent" : "full-screen",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "iphone",
+      "filename" : "Default-568h@2x.png",
+      "extent" : "full-screen",
+      "subtype" : "retina4",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "extent" : "to-status-bar",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "filename" : "Default-Portrait.png",
+      "extent" : "full-screen",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "extent" : "to-status-bar",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "filename" : "Default-Landscape.png",
+      "extent" : "full-screen",
+      "scale" : "1x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "extent" : "to-status-bar",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "portrait",
+      "idiom" : "ipad",
+      "filename" : "Default-Portrait@2x.png",
+      "extent" : "full-screen",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "extent" : "to-status-bar",
+      "scale" : "2x"
+    },
+    {
+      "orientation" : "landscape",
+      "idiom" : "ipad",
+      "filename" : "Default-Landscape@2x.png",
+      "extent" : "full-screen",
+      "scale" : "2x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

packages/template-drawer-navigation-vue/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-AspectFill.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-AspectFill@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-AspectFill@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

packages/template-drawer-navigation-vue/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-Center.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-Center@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-Center@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

packages/template-drawer-navigation-vue/app/App_Resources/iOS/Info.plist

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+	<string>${PRODUCT_NAME}</string>
+	<key>CFBundleExecutable</key>
+	<string>${EXECUTABLE_NAME}</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>${PRODUCT_NAME}</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1.0</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiresFullScreen</key>
+	<true/>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIStatusBarStyle</key>
+	<string>UIStatusBarStyleLightContent</string>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
+</dict>
+</plist>

packages/template-drawer-navigation-vue/app/App_Resources/iOS/LaunchScreen.storyboard

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina5_9" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <layoutGuides>
+                        <viewControllerLayoutGuide type="top" id="Llm-lL-Icb"/>
+                        <viewControllerLayoutGuide type="bottom" id="xb3-aO-Qok"/>
+                    </layoutGuides>
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="LaunchScreen.AspectFill" translatesAutoresizingMaskIntoConstraints="NO" id="wtH-rr-YfP">
+                                <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
+                            </imageView>
+                            <imageView userInteractionEnabled="NO" contentMode="center" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="LaunchScreen.Center" translatesAutoresizingMaskIntoConstraints="NO" id="s1z-aa-wYv">
+                                <rect key="frame" x="0.0" y="150" width="375" height="512"/>
+                            </imageView>
+                        </subviews>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstAttribute="trailing" secondItem="s1z-aa-wYv" secondAttribute="trailing" id="4Rf-kf-vql"/>
+                            <constraint firstAttribute="bottom" secondItem="wtH-rr-YfP" secondAttribute="bottom" id="5CS-At-4ka"/>
+                            <constraint firstItem="wtH-rr-YfP" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="Awn-b8-xf1"/>
+                            <constraint firstItem="s1z-aa-wYv" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="BpJ-vb-eKA"/>
+                            <constraint firstItem="s1z-aa-wYv" firstAttribute="trailing" secondItem="wtH-rr-YfP" secondAttribute="trailing" id="QIM-7J-OZz"/>
+                            <constraint firstAttribute="trailing" secondItem="wtH-rr-YfP" secondAttribute="trailing" id="RXg-rW-UK8"/>
+                            <constraint firstItem="s1z-aa-wYv" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="Rcp-LG-48z"/>
+                            <constraint firstItem="wtH-rr-YfP" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="cch-8E-tYu"/>
+                        </constraints>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="509.60000000000002" y="237.93103448275863"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="LaunchScreen.AspectFill" width="768" height="1024"/>
+        <image name="LaunchScreen.Center" width="384" height="512"/>
+    </resources>
+</document>

packages/template-drawer-navigation-vue/app/App_Resources/iOS/build.xcconfig

@@ -0,0 +1,7 @@
+// You can add custom settings here
+// for example you can uncomment the following line to force distribution code signing
+// CODE_SIGN_IDENTITY = iPhone Distribution 
+// To build for device with Xcode 8 you need to specify your development team. More info: https://developer.apple.com/library/prerelease/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html
+// DEVELOPMENT_TEAM = YOUR_TEAM_ID;
+ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;

packages/template-drawer-navigation-vue/app/_app-common.scss

@@ -0,0 +1,30 @@
+// Place any CSS rules you want to apply on both iOS and Android here.
+// This is where the vast majority of your CSS code goes.
+/* Font icon class*/
+.fa {
+   font-family: "FontAwesome";
+}
+// Common page class
+.page-content {
+    
+    .page-placeholder {
+        color: $page-icon-color;
+        font-size: $page-content-placeholder-font-size;
+        vertical-align: center;
+        horizontal-align: center;
+    }
+
+    .page-icon {
+        font-size: 72;
+        vertical-align: top;
+        horizontal-align: center;
+        color: $page-icon-color;
+        margin-top: 20%;
+    }
+}
+
+/* Action bar*/
+ActionBar .action-bar-title {
+    horizontal-align: center;
+}
+

packages/template-drawer-navigation-vue/app/_app-variables.scss

@@ -0,0 +1,76 @@
+// Import the theme’s variables. If you’re using a color scheme
+// other than “light”, switch the path to the alternative scheme,
+// for example '~nativescript-theme-core/scss/dark'.
+@import '~nativescript-theme-core/scss/light';
+
+// Custom colors
+$background-dark: #F8F8F8 !default;
+$background-light: #FFFFFF !default;
+
+$blue-dark: #022734 !default;
+$blue-light: #02556E !default;
+$blue-50: rgba($blue-dark, 0.5) !default;
+$blue-20: rgba($blue-dark, 0.2) !default;
+$blue-10: rgba($blue-dark, 0.1) !default;
+
+$accent-dark: #3A53FF !default;
+$accent-light: #4781FE !default;
+
+$success-dark: #06CE6A !default;
+$success-light: #00E676 !default;
+
+$warning-dark: #f39c11 !default;
+$warning-light: #F2C112 !default;
+
+$error-dark: #D84039 !default;
+$error-light: #ED473F !default;
+
+$midnight-dark: #0F336D !default;
+$midnight-light: #14418B !default;
+
+$night-dark: #023141 !default;
+$night-light: #01526C !default;
+
+$page-icon-color: #D7D7D7 !default;
+
+// Sizes
+$page-content-placeholder-font-size: 20;
+
+/**
+ * Theme variables overrides
+**/
+
+// Colors
+$background: #fff;
+$primary: lighten(#000, 13%);
+$secondary: lighten(#000, 46%);
+$disabled: lighten(#000, 62%);
+$accent: $accent-dark;
+$error: $error-light;
+
+// SideDrawer
+$item-color-android : #737373;
+$item-active-background: #F8F8F8;
+$item-active-color: $accent;
+$item-active-icon-color: $item-active-color;
+$item-color-ios: $blue-dark;
+$item-color-android: $blue-dark;
+
+$side-drawer-header-background: #fafafa;
+$side-drawer-header-brand: #737373;
+$side-drawer-background: #FFFFFF;
+
+// ActionBar
+$ab-background: $accent;
+$ab-color: $white;
+
+// Buttons
+$btn-color-inverse: $white;
+$btn-color: $accent;
+$btn-color-secondary: darken($btn-color, 10%);
+$btn-color-outline-highlighted: lighten($btn-color, 10%);
+
+//Text colors
+$headings-color: $blue-dark;
+$secondary: $blue-dark;
+$text-color: $blue-dark;

packages/template-drawer-navigation-vue/app/app.android.scss

@@ -0,0 +1,14 @@
+// Import app variables
+@import 'app-variables';
+
+// Import the theme’s main ruleset - both index and platform specific.
+@import '~nativescript-theme-core/scss/index';
+@import '~nativescript-theme-core/scss/platforms/index.android';
+
+// Import common styles
+@import 'app-common';
+
+// Place any CSS rules you want to apply only on Android here
+ActionBar .fa {
+    padding: 40px;
+}

packages/template-drawer-navigation-vue/app/app.ios.scss

@@ -0,0 +1,14 @@
+// Import app variables
+@import 'app-variables';
+
+// Import the theme’s main ruleset - both index and platform specific.
+@import '~nativescript-theme-core/scss/index';
+@import '~nativescript-theme-core/scss/platforms/index.ios';
+
+// Import common styles
+@import 'app-common';
+
+// Place any CSS rules you want to apply only on iOS here
+ActionBar .fa {
+    padding: 40px 40px 40px 0;
+}

packages/template-drawer-navigation-vue/app/app.js

@@ -0,0 +1,20 @@
+import Vue from "nativescript-vue";
+import App from "./components/App";
+import Home from "./components/Home";
+import DrawerContent from "./components/DrawerContent";
+import RadSideDrawer from "nativescript-ui-sidedrawer/vue";
+Vue.use(RadSideDrawer);
+
+Vue.config.silent = (TNS_ENV === 'production');
+
+new Vue({
+    render (h) {
+        return h(
+          App,
+          [
+            h(DrawerContent, { slot: 'drawerContent' }),
+            h(Home, { slot: 'mainContent' })
+          ]
+        )
+      }
+  }).$start();

packages/template-drawer-navigation-vue/app/app.scss

@@ -0,0 +1,9 @@
+// Import app variables
+@import 'app-variables';
+
+// Import the theme’s main ruleset - both index and platform specific.
+@import '~nativescript-theme-core/scss/index';
+@import '~nativescript-theme-core/scss/platforms/index.android';
+
+// Import common styles
+@import 'app-common';

packages/template-drawer-navigation-vue/app/components/App.vue

@@ -0,0 +1,25 @@
+<template lang="html">
+  <RadSideDrawer ref="drawer" drawerLocation="Left" gesturesEnabled="true" :drawerTransition="transition">
+    <StackLayout ~drawerContent backgroundColor="#ffffff">
+      <slot name="drawerContent"></slot>
+    </StackLayout>
+    <Frame ~mainContent ref="drawerMainContent">
+      <slot name="mainContent"></slot>
+    </Frame>
+  </RadSideDrawer>
+</template>
+
+<script>
+    import { SlideInOnTopTransition } from 'nativescript-ui-sidedrawer';
+    
+    export default {
+        data () {
+          return {
+            transition: new SlideInOnTopTransition()
+          }
+        }
+  }
+</script>
+
+<style lang="css">
+</style>

packages/template-drawer-navigation-vue/app/components/Browse.vue

@@ -0,0 +1,57 @@
+<template>
+    <Page class="page">
+        <ActionBar class="action-bar">
+            <!-- 
+            Use the NavigationButton as a side-drawer button in Android
+            because ActionItems are shown on the right side of the ActionBar
+            -->
+            <NavigationButton ios:visibility="collapsed" icon="res://menu" @tap="onDrawerButtonTap"></NavigationButton>
+            <!-- 
+            Use the ActionItem for IOS with position set to left. Using the
+            NavigationButton as a side-drawer button in iOS is not possible,
+            because its function is to always navigate back in the application.
+            -->
+            <ActionItem icon="res://navigation/menu" 
+                android:visibility="collapsed" 
+                @tap="onDrawerButtonTap"
+                ios.position="left">
+            </ActionItem>
+            <Label class="action-bar-title" text="Browse"></Label>
+        </ActionBar>
+
+        <GridLayout class="page-content">
+            <Label class="page-icon fa" text.decode="&#xf1ea;"></Label>
+            <Label class="page-placeholder" :text="message"></Label>
+        </GridLayout>
+
+    </Page>
+</template>
+
+<script>
+    import * as utils from "~/shared/utils";
+    import SelectedPageService from "../shared/selected-page-service";
+
+    export default {
+        mounted() {
+            SelectedPageService.getInstance().updateSelectedPage("Browse");
+        },
+        computed: {
+            message() {
+                return "<!-- Page content goes here -->";
+            }
+        },
+        methods: {
+            onDrawerButtonTap() {
+                utils.showDrawer();
+            }
+        }
+    };
+</script>
+
+<style scoped lang="scss">
+    // Start custom common variables
+    @import '../app-variables';
+    // End custom common variables
+
+    // Custom styles
+</style>

packages/template-drawer-navigation-vue/app/components/DrawerContent.vue

@@ -0,0 +1,148 @@
+<template lang="html">
+<GridLayout rows="auto, *" class="sidedrawer sidedrawer-left">
+            <StackLayout row="0" class="sidedrawer-header">
+                <Label class="sidedrawer-header-image fa" text.decode="&#xf2bd;"></Label>
+                <Label class="sidedrawer-header-brand" text="User Name"></Label>
+                <Label class="footnote" text="username@mail.com"></Label>
+            </StackLayout>
+        
+            <ScrollView row="1">
+                <StackLayout class="sidedrawer-content">
+                    <GridLayout columns="auto, *" :class="'sidedrawer-list-item' + (selectedPage === 'Home' ? ' selected': '')" @tap="onNavigationItemTap(Home)">
+                        <Label col="0" text.decode="&#xf015;" class="fa"></Label>
+                        <Label col="1" text="Home" class="p-r-10"></Label>
+                    </GridLayout>
+
+                    <GridLayout columns="auto, *" :class="'sidedrawer-list-item' + (selectedPage === 'Browse' ? ' selected': '')" @tap="onNavigationItemTap(Browse)">
+                        <Label col="0" text.decode="&#xf1ea;" class="fa"></Label>
+                        <Label col="1" text="Browse" class="p-r-10"></Label>
+                    </GridLayout>
+
+                    <GridLayout columns="auto, *" :class="'sidedrawer-list-item' + (selectedPage === 'Search' ? ' selected': '')" @tap="onNavigationItemTap(Search)">
+                        <Label col="0" text.decode="&#xf002;" class="fa"></Label>
+                        <Label col="1" text="Search" class="p-r-10"></Label>
+                    </GridLayout>
+
+                    <GridLayout columns="auto, *" :class="'sidedrawer-list-item' + (selectedPage === 'Featured' ? ' selected': '')" @tap="onNavigationItemTap(Featured)">
+                        <Label col="0" text.decode="&#xf005;" class="fa"></Label>
+                        <Label col="1" text="Featured" class="p-r-10"></Label>
+                    </GridLayout>
+        
+                    <StackLayout class="hr-light"></StackLayout>
+
+                    <GridLayout columns="auto, *" :class="'sidedrawer-list-item' + (selectedPage === 'Settings' ? ' selected': '')" @tap="onNavigationItemTap(Settings)">
+                        <Label col="0" text.decode="&#xf013;" class="fa"></Label>
+                        <Label col="1" text="Settings" class="p-r-10"></Label>
+                    </GridLayout>
+                </StackLayout>
+            </ScrollView>
+        </GridLayout>
+</template>
+
+<script>
+    import Home from "./Home";
+    import Browse from "./Browse";
+    import Featured from "./Featured";
+    import Search from "./Search";
+    import Settings from "./Settings";
+    import * as utils from "~/shared/utils";
+    import SelectedPageService from "~/shared/selected-page-service";    
+    
+    export default {
+        mounted() {
+            SelectedPageService.getInstance().selectedPage$
+                .subscribe((selectedPage) => this.selectedPage = selectedPage);
+        },
+        data () {
+            return {
+                Home: Home,
+                Browse: Browse,
+                Featured: Featured,
+                Search: Search,
+                Settings: Settings,
+                selectedPage: ""
+            };
+        },
+        components: {
+            Home,
+            Browse,
+            Featured,
+            Search,
+            Settings
+        },
+        methods: {
+            onNavigationItemTap(component) {
+                this.$navigateTo(component, {
+                    clearHistory: true
+                });
+                utils.closeDrawer();
+            }
+        }
+    };
+</script>
+
+<style scoped lang="scss">
+    // Custom common variables
+    @import '../app-variables';
+
+    // Drawer navigation custom styles
+    $sidedrawer-header-image-size: 60;
+    $sidedrawer-header-image-offset-top: 20;
+    $sidedrawer-header-image-offset-bottom: 5;
+    $sidedrawer-list-item-offset-left: 15;
+    $sidedrawer-list-icon-offset: 10;
+    $sidedrawer-list-icon-size: 20;
+    .sidedrawer {
+        &.sidedrawer-left {
+            background-color: $ab-background;
+
+            .sidedrawer-header-image {
+                color: $background-dark;
+                height: $sidedrawer-header-image-size;
+                width: $sidedrawer-header-image-size;
+                font-size: $sidedrawer-header-image-size;
+                padding: 0;
+                margin-bottom: $sidedrawer-header-image-offset-bottom;
+                margin-top: $sidedrawer-header-image-offset-top;
+            }
+
+            .footnote {
+                color: rgba($ab-color, 0.5);
+            }
+        }
+
+        .sidedrawer-header {
+            background-color: $ab-background;
+
+            .sidedrawer-header-brand {
+                color: $ab-color;
+            }
+        }
+
+        .sidedrawer-content {
+            background-color: $side-drawer-background;
+        }
+
+        .sidedrawer-list-item {
+            padding-left: $sidedrawer-list-item-offset-left;
+
+            Label {
+                vertical-align: center;
+                color: $blue-dark;
+            }
+
+            .fa {
+                width: $sidedrawer-list-icon-size;
+                margin-right: $sidedrawer-list-icon-offset;
+            }
+
+            &.selected {
+                background-color: $item-active-background;
+
+                Label {
+                    color: $item-active-color;
+                }
+            }
+        }
+    }
+</style>

packages/template-drawer-navigation-vue/app/components/Featured.vue

@@ -0,0 +1,56 @@
+<template>
+    <Page class="page">
+        <ActionBar class="action-bar">
+            <!-- 
+            Use the NavigationButton as a side-drawer button in Android
+            because ActionItems are shown on the right side of the ActionBar
+            -->
+            <NavigationButton ios:visibility="collapsed" icon="res://menu" @tap="onDrawerButtonTap"></NavigationButton>
+            <!-- 
+            Use the ActionItem for IOS with position set to left. Using the
+            NavigationButton as a side-drawer button in iOS is not possible,
+            because its function is to always navigate back in the application.
+            -->
+            <ActionItem icon="res://navigation/menu" 
+                android:visibility="collapsed" 
+                @tap="onDrawerButtonTap"
+                ios.position="left">
+            </ActionItem>
+            <Label class="action-bar-title" text="Featured"></Label>
+        </ActionBar>
+
+        <GridLayout class="page-content">
+            <Label class="page-icon fa" text.decode="&#xf005;"></Label>
+            <Label class="page-placeholder" :text="message"></Label>
+        </GridLayout>
+    </Page>
+</template>
+
+<script>
+    import * as utils from "~/shared/utils";
+    import SelectedPageService from "../shared/selected-page-service";
+
+    export default {
+        mounted() {
+            SelectedPageService.getInstance().updateSelectedPage("Featured");
+        },
+        computed: {
+            message() {
+                return "<!-- Page content goes here -->";
+            }
+        },
+        methods: {
+            onDrawerButtonTap() {
+                utils.showDrawer();
+            }
+        }
+    };
+</script>
+
+<style scoped lang="scss">
+    // Start custom common variables
+    @import '../app-variables';
+    // End custom common variables
+
+    // Custom styles
+</style>

packages/template-drawer-navigation-vue/app/components/Home.vue

@@ -0,0 +1,57 @@
+<template>
+    <Page class="page">
+        <ActionBar class="action-bar">
+            <!-- 
+            Use the NavigationButton as a side-drawer button in Android
+            because ActionItems are shown on the right side of the ActionBar
+            -->
+            <NavigationButton ios:visibility="collapsed" icon="res://menu" @tap="onDrawerButtonTap"></NavigationButton>
+            <!-- 
+            Use the ActionItem for IOS with position set to left. Using the
+            NavigationButton as a side-drawer button in iOS is not possible,
+            because its function is to always navigate back in the application.
+            -->
+            <ActionItem icon="res://navigation/menu" 
+                android:visibility="collapsed" 
+                @tap="onDrawerButtonTap"
+                ios.position="left">
+            </ActionItem>
+            <Label class="action-bar-title" text="Home"></Label>
+        </ActionBar>
+
+        <GridLayout class="page-content">
+            <Label class="page-icon fa" text.decode="&#xf015;"></Label>
+            <Label class="page-placeholder" :text="message"></Label>
+        </GridLayout>
+
+    </Page>
+</template>
+
+<script>
+    import * as utils from "~/shared/utils";
+    import SelectedPageService from "../shared/selected-page-service";
+
+    export default {
+        mounted() {
+            SelectedPageService.getInstance().updateSelectedPage("Home");
+        },
+        computed: {
+            message() {
+                return "<!-- Page content goes here -->";
+            }
+        },
+        methods: {
+            onDrawerButtonTap() {
+                utils.showDrawer();
+            }
+        }
+    };
+</script>
+
+<style scoped lang="scss">
+    // Start custom common variables
+    @import '../app-variables';
+    // End custom common variables
+
+    // Custom styles
+</style>

packages/template-drawer-navigation-vue/app/components/Search.vue

@@ -0,0 +1,56 @@
+<template>
+    <Page class="page">
+        <ActionBar class="action-bar">
+            <!-- 
+            Use the NavigationButton as a side-drawer button in Android
+            because ActionItems are shown on the right side of the ActionBar
+            -->
+            <NavigationButton ios:visibility="collapsed" icon="res://menu" @tap="onDrawerButtonTap"></NavigationButton>
+            <!-- 
+            Use the ActionItem for IOS with position set to left. Using the
+            NavigationButton as a side-drawer button in iOS is not possible,
+            because its function is to always navigate back in the application.
+            -->
+            <ActionItem icon="res://navigation/menu" 
+                android:visibility="collapsed" 
+                @tap="onDrawerButtonTap"
+                ios.position="left">
+            </ActionItem>
+            <Label class="action-bar-title" text="Search"></Label>
+        </ActionBar>
+
+        <GridLayout class="page-content">
+            <Label class="page-icon fa" text.decode="&#xf002;"></Label>
+            <Label class="page-placeholder" :text="message"></Label>
+        </GridLayout>
+    </Page>
+</template>
+
+<script>
+    import * as utils from "~/shared/utils";
+    import SelectedPageService from "../shared/selected-page-service";
+
+    export default {
+        mounted() {
+            SelectedPageService.getInstance().updateSelectedPage("Search");
+        },
+        computed: {
+            message() {
+                return "<!-- Page content goes here -->";
+            }
+        },
+        methods: {
+            onDrawerButtonTap() {
+                utils.showDrawer();
+            }
+        }
+    };
+</script>
+
+<style scoped lang="scss">
+    // Start custom common variables
+    @import '../app-variables';
+    // End custom common variables
+
+    // Custom styles
+</style>

packages/template-drawer-navigation-vue/app/components/Settings.vue

@@ -0,0 +1,56 @@
+<template>
+    <Page class="page">
+        <ActionBar class="action-bar">
+            <!-- 
+            Use the NavigationButton as a side-drawer button in Android
+            because ActionItems are shown on the right side of the ActionBar
+            -->
+            <NavigationButton ios:visibility="collapsed" icon="res://menu" @tap="onDrawerButtonTap"></NavigationButton>
+            <!-- 
+            Use the ActionItem for IOS with position set to left. Using the
+            NavigationButton as a side-drawer button in iOS is not possible,
+            because its function is to always navigate back in the application.
+            -->
+            <ActionItem icon="res://navigation/menu" 
+                android:visibility="collapsed" 
+                @tap="onDrawerButtonTap"
+                ios.position="left">
+            </ActionItem>
+            <Label class="action-bar-title" text="Settings"></Label>
+        </ActionBar>
+
+        <GridLayout class="page-content">
+            <Label class="page-icon fa" text.decode="&#xf013;"></Label>
+            <Label class="page-placeholder" :text="message"></Label>
+        </GridLayout>
+    </Page>
+</template>
+
+<script>
+    import * as utils from "~/shared/utils";
+    import SelectedPageService from "../shared/selected-page-service";
+
+    export default {
+        mounted() {
+            SelectedPageService.getInstance().updateSelectedPage("Settings");
+        },
+        computed: {
+            message() {
+                return "<!-- Page content goes here -->";
+            }
+        },
+        methods: {
+            onDrawerButtonTap() {
+                utils.showDrawer();
+            }
+        }
+    };
+</script>
+
+<style scoped lang="scss">
+    // Start custom common variables
+    @import '../app-variables';
+    // End custom common variables
+
+    // Custom styles
+</style>

packages/template-drawer-navigation-vue/app/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "app.js",
+  "android": {
+    "v8Flags": "--expose_gc"
+  }
+}

packages/template-drawer-navigation-vue/app/shared/selected-page-service.js

@@ -0,0 +1,25 @@
+const { BehaviorSubject } = require("rxjs");
+
+function SelectedPageService() {
+    if (SelectedPageService._instance) {
+        throw new Error("Use SelectedPageService.getInstance() instead of new.");
+    }
+
+    // Observable selectedPage source
+    this._selectedPageSource = new BehaviorSubject("");
+
+    // Observable selectedPage stream
+    this.selectedPage$ = this._selectedPageSource.asObservable();
+
+    this.updateSelectedPage = function(selectedPage) {
+        this._selectedPageSource.next(selectedPage);
+    };
+}
+
+SelectedPageService.getInstance = function () {
+    return SelectedPageService._instance;
+};
+
+SelectedPageService._instance = new SelectedPageService();
+
+module.exports = SelectedPageService;