diff --git a/packages/template-blank-vue-ts/app/app.css b/packages/template-blank-vue-ts/app/app.css
index a8612f94..e2b5b300 100644
--- a/packages/template-blank-vue-ts/app/app.css
+++ b/packages/template-blank-vue-ts/app/app.css
@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 ActionBar {
     background-color: #65adf1;
diff --git a/packages/template-blank-vue-ts/app/app.ts b/packages/template-blank-vue-ts/app/app.ts
index 1ef139f9..d396ccee 100644
--- a/packages/template-blank-vue-ts/app/app.ts
+++ b/packages/template-blank-vue-ts/app/app.ts
@@ -1,11 +1,5 @@
-import Vue from 'nativescript-vue'
-import Home from './components/Home.vue'
-
-declare let __DEV__: boolean;
+import { createApp } from 'nativescript-vue'
 
-// Prints Vue logs when --env.production is *NOT* set while building
-Vue.config.silent = !__DEV__
+import Home from './components/Home.vue'
 
-new Vue({
-  render: (h) => h('frame', [h(Home)]),
-}).$start()
+createApp(Home).start()
diff --git a/packages/template-blank-vue-ts/app/components/Home.vue b/packages/template-blank-vue-ts/app/components/Home.vue
index 965a6e7f..086679c1 100644
--- a/packages/template-blank-vue-ts/app/components/Home.vue
+++ b/packages/template-blank-vue-ts/app/components/Home.vue
@@ -11,9 +11,7 @@
 </template>
 
 <script lang="ts">
-  import Vue from "nativescript-vue";
-
-  export default Vue.extend({
+  export default {
     computed: {
       message() {
         return "Blank {N}-Vue app";
@@ -25,11 +23,5 @@
         console.log('You have tapped the message!')
       }
     }
-  });
+  };
 </script>
-
-<style>
-  /* .info {
-    font-size: 20;
-  } */
-</style>
diff --git a/packages/template-blank-vue-ts/package.json b/packages/template-blank-vue-ts/package.json
index b9104848..03777551 100644
--- a/packages/template-blank-vue-ts/package.json
+++ b/packages/template-blank-vue-ts/package.json
@@ -2,7 +2,7 @@
   "name": "@nativescript/template-blank-vue-ts",
   "main": "app/app.ts",
   "displayName": "Blank Vue Typescript",
-  "version": "9.0.6",
+  "version": "9.0.7",
   "description": "Blank Typescript template for NativeScript apps using Vue.",
   "author": "NativeScript Team <oss@nativescript.org>",
   "license": "Apache-2.0",
@@ -25,8 +25,6 @@
     "!tools/assets",
     "types",
     ".editorconfig",
-    "tailwind.config.js",
-    "webpack.config.js",
     "tsconfig.json"
   ],
   "keywords": [
@@ -44,18 +42,14 @@
   ],
   "dependencies": {
     "@nativescript/core": "~9.0.0",
-    "nativescript-vue": "~2.9.3"
+    "nativescript-vue": "^3.0.0"
   },
   "devDependencies": {
-    "@nativescript/tailwind": "^2.1.0",
+    "@nativescript/tailwind": "^4.0.0",
     "@nativescript/types": "~9.0.0",
     "@nativescript/webpack": "~5.0.31",
     "@types/node": "^20.0.0",
-    "nativescript-vue-template-compiler": "~2.9.3",
-    "tailwindcss": "~3.4.0",
-    "typescript": "~5.4.0",
-    "vue": "~2.6.12",
-    "vue-loader": "^15.11.1",
-    "vue-template-compiler": "~2.6.12"
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.4.0"
   }
 }
diff --git a/packages/template-blank-vue-ts/tailwind.config.js b/packages/template-blank-vue-ts/tailwind.config.js
deleted file mode 100644
index c3d500df..00000000
--- a/packages/template-blank-vue-ts/tailwind.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./app/**/*.{css,html,vue,ts,tsx}'],
-  // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
-  darkMode: ['class', '.ns-dark'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-  corePlugins: {
-    preflight: false, // disables browser-specific resets
-  },
-}
diff --git a/packages/template-blank-vue-ts/types/shims.vue.d.ts b/packages/template-blank-vue-ts/types/shims.vue.d.ts
index d9f24faa..19b53494 100644
--- a/packages/template-blank-vue-ts/types/shims.vue.d.ts
+++ b/packages/template-blank-vue-ts/types/shims.vue.d.ts
@@ -1,4 +1,5 @@
 declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
+  import { DefineComponent } from 'nativescript-vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }
diff --git a/packages/template-blank-vue-ts/webpack.config.js b/packages/template-blank-vue-ts/webpack.config.js
deleted file mode 100644
index 5546b8e7..00000000
--- a/packages/template-blank-vue-ts/webpack.config.js
+++ /dev/null
@@ -1,38 +0,0 @@
-const webpack = require("@nativescript/webpack");
-const path = require("path");
-const VueLoaderPlugin = require("vue-loader/lib/plugin");
-
-module.exports = (env) => {
-	webpack.init(env);
-
-	// Learn how to customize:
-	// https://docs.nativescript.org/webpack
-
-	webpack.chainWebpack((config) => {
-		// Use vue-loader@15 for Vue 2
-		config.resolve.alias.set(
-			"vue-loader",
-			path.resolve(__dirname, "node_modules/vue-loader")
-		);
-
-		// Remove the default VueLoaderPlugin (v17) and add v15
-		config.plugins.delete("VueLoaderPlugin");
-		config.plugin("VueLoaderPlugin").use(VueLoaderPlugin);
-
-		// Configure vue-loader for Vue 2
-		config.module
-			.rule("vue")
-			.use("vue-loader")
-			.loader(require.resolve("vue-loader"))
-			.tap((options) => ({
-				...options,
-				compiler: require("vue-template-compiler"),
-				compilerOptions: {
-                    whitespace: 'condense',
-                    preserveWhitespace: false,
-                },
-			}));
-	});
-
-	return webpack.resolveConfig();
-};
diff --git a/packages/template-blank-vue/app/app.css b/packages/template-blank-vue/app/app.css
index a8612f94..e2b5b300 100644
--- a/packages/template-blank-vue/app/app.css
+++ b/packages/template-blank-vue/app/app.css
@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 ActionBar {
     background-color: #65adf1;
diff --git a/packages/template-blank-vue/app/app.js b/packages/template-blank-vue/app/app.js
index 763c5d60..d396ccee 100644
--- a/packages/template-blank-vue/app/app.js
+++ b/packages/template-blank-vue/app/app.js
@@ -1,7 +1,5 @@
-import Vue from 'nativescript-vue'
+import { createApp } from 'nativescript-vue'
 
-import Home from './components/Home'
+import Home from './components/Home.vue'
 
-new Vue({
-  render: (h) => h('frame', [h(Home)]),
-}).$start()
+createApp(Home).start()
diff --git a/packages/template-blank-vue/package.json b/packages/template-blank-vue/package.json
index 0e7cd36e..99f3ed65 100644
--- a/packages/template-blank-vue/package.json
+++ b/packages/template-blank-vue/package.json
@@ -2,7 +2,7 @@
   "name": "@nativescript/template-blank-vue",
   "main": "app/app.js",
   "displayName": "Blank",
-  "version": "9.0.5",
+  "version": "9.0.6",
   "description": "Blank template for NativeScript apps using Vue.",
   "author": "NativeScript Team <oss@nativescript.org>",
   "license": "Apache-2.0",
@@ -24,9 +24,7 @@
     "tools",
     "!tools/assets",
     ".editorconfig",
-    "jsconfig.json",
-    "tailwind.config.js",
-    "webpack.config.js"
+    "jsconfig.json"
   ],
   "keywords": [
     "nstudio",
@@ -43,15 +41,11 @@
   ],
   "dependencies": {
     "@nativescript/core": "~9.0.0",
-    "nativescript-vue": "~2.9.3"
+    "nativescript-vue": "^3.0.0"
   },
   "devDependencies": {
-    "@nativescript/tailwind": "^2.1.0",
+    "@nativescript/tailwind": "^4.0.0",
     "@nativescript/webpack": "~5.0.31",
-    "nativescript-vue-template-compiler": "~2.9.3",
-    "tailwindcss": "~3.4.0",
-    "vue": "~2.6.12",
-    "vue-loader": "^15.11.1",
-    "vue-template-compiler": "~2.6.12"
+    "tailwindcss": "^4.0.0"
   }
 }
diff --git a/packages/template-blank-vue/tailwind.config.js b/packages/template-blank-vue/tailwind.config.js
deleted file mode 100644
index c3d500df..00000000
--- a/packages/template-blank-vue/tailwind.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./app/**/*.{css,html,vue,ts,tsx}'],
-  // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
-  darkMode: ['class', '.ns-dark'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-  corePlugins: {
-    preflight: false, // disables browser-specific resets
-  },
-}
diff --git a/packages/template-blank-vue/webpack.config.js b/packages/template-blank-vue/webpack.config.js
deleted file mode 100644
index 1365b983..00000000
--- a/packages/template-blank-vue/webpack.config.js
+++ /dev/null
@@ -1,38 +0,0 @@
-const webpack = require("@nativescript/webpack");
-const path = require("path");
-const VueLoaderPlugin = require("vue-loader/lib/plugin");
-
-module.exports = (env) => {
-    webpack.init(env);
-
-    // Learn how to customize:
-    // https://docs.nativescript.org/webpack
-
-    webpack.chainWebpack((config) => {
-        // Use vue-loader@15 for Vue 2
-        config.resolve.alias.set(
-            "vue-loader",
-            path.resolve(__dirname, "node_modules/vue-loader")
-        );
-
-        // Remove the default VueLoaderPlugin (v17) and add v15
-        config.plugins.delete("VueLoaderPlugin");
-        config.plugin("VueLoaderPlugin").use(VueLoaderPlugin);
-
-        // Configure vue-loader for Vue 2
-        config.module
-            .rule("vue")
-            .use("vue-loader")
-            .loader(require.resolve("vue-loader"))
-            .tap((options) => ({
-                ...options,
-                compiler: require("vue-template-compiler"),
-                compilerOptions: {
-                    whitespace: 'condense',
-                    preserveWhitespace: false,
-                },
-            }));
-    });
-
-    return webpack.resolveConfig();
-};
diff --git a/packages/template-drawer-navigation-vue/app/_app-common.scss b/packages/template-drawer-navigation-vue/app/_app-common.scss
deleted file mode 100644
index e9457e1c..00000000
--- a/packages/template-drawer-navigation-vue/app/_app-common.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@import '@nativescript/theme/core';
-@import '@nativescript/theme/default';
-
-// 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
-.fab {
-  font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
-  font-weight: 400;
-}
-
-.fas {
-  font-family: 'Font Awesome 5 Free', 'fa-solid-900';
-  font-weight: 900;
-}
-
-.far {
-  font-family: 'Font Awesome 5 Free', 'fa-regular-400';
-  font-weight: 400;
-}
-
-// Common page class
-.page__content {
-  &-icon,
-  &-placeholder {
-    color: const(grey);
-    font-size: 20;
-    vertical-align: center;
-    horizontal-align: center;
-  }
-
-  &-icon {
-    font-size: 72;
-    vertical-align: top;
-    margin-top: 20%;
-  }
-}
-
-// Drawer navigation custom styles
-.nt-drawer__header-image {
-  color: const(grey);
-}
diff --git a/packages/template-drawer-navigation-vue/app/app.android.scss b/packages/template-drawer-navigation-vue/app/app.android.scss
deleted file mode 100644
index 52162715..00000000
--- a/packages/template-drawer-navigation-vue/app/app.android.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Import common styles
-@import 'app-common';
-
-// Place any CSS rules you want to apply only on Android here
diff --git a/packages/template-drawer-navigation-vue/app/app.css b/packages/template-drawer-navigation-vue/app/app.css
new file mode 100644
index 00000000..6d13c799
--- /dev/null
+++ b/packages/template-drawer-navigation-vue/app/app.css
@@ -0,0 +1,21 @@
+@import "tailwindcss";
+
+ActionBar {
+    background-color: #65adf1;
+    color: white;
+}
+
+.fas {
+    font-family: 'Font Awesome 5 Free', 'fa-solid-900';
+    font-weight: 900;
+}
+
+.far {
+    font-family: 'Font Awesome 5 Free', 'fa-regular-400';
+    font-weight: 400;
+}
+
+.fab {
+    font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
+    font-weight: 400;
+}
diff --git a/packages/template-drawer-navigation-vue/app/app.ios.scss b/packages/template-drawer-navigation-vue/app/app.ios.scss
deleted file mode 100644
index 93aa9c27..00000000
--- a/packages/template-drawer-navigation-vue/app/app.ios.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Import common styles
-@import 'app-common';
-
-// Place any CSS rules you want to apply only on iOS here
diff --git a/packages/template-drawer-navigation-vue/app/app.js b/packages/template-drawer-navigation-vue/app/app.js
index 06ab81b8..62a4983c 100644
--- a/packages/template-drawer-navigation-vue/app/app.js
+++ b/packages/template-drawer-navigation-vue/app/app.js
@@ -1,12 +1,8 @@
-import Vue from 'nativescript-vue'
-import RadSideDrawer from 'nativescript-ui-sidedrawer/vue'
+import { createApp } from 'nativescript-vue'
+import DrawerPlugin from '@nativescript-community/ui-drawer/vue3'
 
-Vue.use(RadSideDrawer)
+import App from './components/App.vue'
 
-import App from './components/App'
-
-Vue.config.silent = !__DEV__
-
-new Vue({
-  render: h => h(App)
-}).$start()
+const app = createApp(App)
+app.use(DrawerPlugin)
+app.start()
diff --git a/packages/template-drawer-navigation-vue/app/components/App.vue b/packages/template-drawer-navigation-vue/app/components/App.vue
index 32772509..994b76fc 100644
--- a/packages/template-drawer-navigation-vue/app/components/App.vue
+++ b/packages/template-drawer-navigation-vue/app/components/App.vue
@@ -1,37 +1,22 @@
-<template lang="html">
-    <RadSideDrawer ref="drawer" drawerLocation="Left" gesturesEnabled="true" :drawerTransition="transition">
-        <StackLayout ~drawerContent backgroundColor="#ffffff">
-            <DrawerContent/>
+<template>
+    <Drawer ref="drawer" gesturesEnabled="true">
+        <StackLayout ~leftDrawer backgroundColor="#ffffff">
+            <DrawerContent />
         </StackLayout>
-        <Frame ~mainContent ref="drawerMainContent">
-            <Home/>
+        <Frame ~mainContent>
+            <Home />
         </Frame>
-    </RadSideDrawer>
+    </Drawer>
 </template>
 
 <script>
-  import DrawerContent from './DrawerContent'
-  import Home from './Home'
-  import { SlideInOnTopTransition } from 'nativescript-ui-sidedrawer';
+  import DrawerContent from './DrawerContent.vue'
+  import Home from './Home.vue'
 
   export default {
-    data() {
-      return {
-        transition: new SlideInOnTopTransition()
-      }
-    },
-
     components: {
       DrawerContent,
       Home
     }
   }
 </script>
-
-<style scoped lang="scss">
-    // Start custom common variables
-    @import '@nativescript/theme/scss/variables/blue';
-    // End custom common variables
-
-    // Custom styles
-</style>
diff --git a/packages/template-drawer-navigation-vue/app/components/Browse.vue b/packages/template-drawer-navigation-vue/app/components/Browse.vue
index 61beea58..0d0a7d68 100644
--- a/packages/template-drawer-navigation-vue/app/components/Browse.vue
+++ b/packages/template-drawer-navigation-vue/app/components/Browse.vue
@@ -1,46 +1,27 @@
 <template>
-    <Page class="page">
-      <ActionBar class="action-bar">
-        <NavigationButton visibility="hidden"/>
-        <GridLayout columns="50, *">
-          <Label class="action-bar-title" text="Browse" colSpan="2"/>
+    <Page>
+        <ActionBar>
+            <GridLayout columns="auto, *">
+                <Label col="0" class="fas text-lg" text.decode="&#xf0c9;" @tap="onDrawerButtonTap"/>
+                <Label col="1" text="Browse" class="font-bold text-lg"/>
+            </GridLayout>
+        </ActionBar>
 
-          <Label class="fas" text.decode="&#xf0c9;" @tap="onDrawerButtonTap"/>
-        </GridLayout>
-      </ActionBar>
-
-        <GridLayout class="page__content">
-            <Label class="page__content-icon far" text.decode="&#xf1ea;"/>
-            <Label class="page__content-placeholder" :text="message"/>
+        <GridLayout>
+            <Label class="far text-7xl text-gray-400 text-center" style="vertical-align: top; margin-top: 20%" text.decode="&#xf1ea;"/>
+            <Label class="text-xl text-gray-400 text-center align-middle" text="Page content goes here"/>
         </GridLayout>
     </Page>
 </template>
 
 <script>
-  import * as utils from "~/shared/utils";
-  import { SelectedPageService } from "../shared/selected-page-service";
+  import * as utils from '~/shared/utils'
 
   export default {
-    mounted() {
-      SelectedPageService.getInstance().updateSelectedPage("Browse");
-    },
-    computed: {
-      message() {
-        return "<!-- Page content goes here -->";
-      }
-    },
     methods: {
       onDrawerButtonTap() {
-        utils.showDrawer();
+        utils.showDrawer()
       }
     }
-  };
+  }
 </script>
-
-<style scoped lang="scss">
-    // Start custom common variables
-    @import '@nativescript/theme/scss/variables/blue';
-    // End custom common variables
-
-    // Custom styles
-</style>
diff --git a/packages/template-drawer-navigation-vue/app/components/DrawerContent.vue b/packages/template-drawer-navigation-vue/app/components/DrawerContent.vue
index 89d5563e..818d1908 100644
--- a/packages/template-drawer-navigation-vue/app/components/DrawerContent.vue
+++ b/packages/template-drawer-navigation-vue/app/components/DrawerContent.vue
@@ -1,48 +1,48 @@
-<template lang="html">
-    <GridLayout rows="auto, *" class="nt-drawer__content">
-        <StackLayout row="0" class="nt-drawer__header">
-            <Image class="nt-drawer__header-image fas t-36" src.decode="font://&#xf2bd;"/>
-            <Label class="nt-drawer__header-brand" text="User Name"/>
-            <Label class="nt-drawer__header-footnote" text="username@mail.com"/>
+<template>
+    <GridLayout rows="auto, *">
+        <StackLayout row="0" class="p-4 bg-gray-100">
+            <Image class="fas text-4xl text-gray-500 text-center" src.decode="font://&#xf2bd;"/>
+            <Label class="text-lg font-bold text-center" text="User Name"/>
+            <Label class="text-sm text-gray-500 text-center" text="username@mail.com"/>
         </StackLayout>
 
-        <ScrollView row="1" class="nt-drawer__body">
+        <ScrollView row="1">
             <StackLayout>
-                <GridLayout columns="auto, *"
-                            :class="'nt-drawer__list-item' + (selectedPage === 'Home' ? ' -selected': '')"
-                            @tap="onNavigationItemTap(Home)">
-                    <Label col="0" text.decode="&#xf015;" class="nt-icon fas"/>
-                    <Label col="1" text="Home" class="p-r-10"/>
+                <GridLayout columns="auto, *" class="p-4"
+                            :class="{ 'bg-gray-200': selectedPage === 'Home' }"
+                            @tap="onNavigationItemTap(Home, 'Home')">
+                    <Label col="0" text.decode="&#xf015;" class="fas text-lg w-8"/>
+                    <Label col="1" text="Home" class="text-base"/>
                 </GridLayout>
 
-                <GridLayout columns="auto, *"
-                            :class="'nt-drawer__list-item' + (selectedPage === 'Browse' ? ' -selected': '')"
-                            @tap="onNavigationItemTap(Browse)">
-                    <Label col="0" text.decode="&#xf1ea;" class="nt-icon far"/>
-                    <Label col="1" text="Browse" class="p-r-10"/>
+                <GridLayout columns="auto, *" class="p-4"
+                            :class="{ 'bg-gray-200': selectedPage === 'Browse' }"
+                            @tap="onNavigationItemTap(Browse, 'Browse')">
+                    <Label col="0" text.decode="&#xf1ea;" class="far text-lg w-8"/>
+                    <Label col="1" text="Browse" class="text-base"/>
                 </GridLayout>
 
-                <GridLayout columns="auto, *"
-                            :class="'nt-drawer__list-item' + (selectedPage === 'Search' ? ' -selected': '')"
-                            @tap="onNavigationItemTap(Search)">
-                    <Label col="0" text.decode="&#xf002;" class="nt-icon fas"/>
-                    <Label col="1" text="Search" class="p-r-10"/>
+                <GridLayout columns="auto, *" class="p-4"
+                            :class="{ 'bg-gray-200': selectedPage === 'Search' }"
+                            @tap="onNavigationItemTap(Search, 'Search')">
+                    <Label col="0" text.decode="&#xf002;" class="fas text-lg w-8"/>
+                    <Label col="1" text="Search" class="text-base"/>
                 </GridLayout>
 
-                <GridLayout columns="auto, *"
-                            :class="'nt-drawer__list-item' + (selectedPage === 'Featured' ? ' -selected': '')"
-                            @tap="onNavigationItemTap(Featured)">
-                    <Label col="0" text.decode="&#xf005;" class="nt-icon fas"/>
-                    <Label col="1" text="Featured" class="p-r-10"/>
+                <GridLayout columns="auto, *" class="p-4"
+                            :class="{ 'bg-gray-200': selectedPage === 'Featured' }"
+                            @tap="onNavigationItemTap(Featured, 'Featured')">
+                    <Label col="0" text.decode="&#xf005;" class="fas text-lg w-8"/>
+                    <Label col="1" text="Featured" class="text-base"/>
                 </GridLayout>
 
-                <StackLayout class="hr"/>
+                <StackLayout class="border-b border-gray-300 my-2"/>
 
-                <GridLayout columns="auto, *"
-                            :class="'nt-drawer__list-item' + (selectedPage === 'Settings' ? ' -selected': '')"
-                            @tap="onNavigationItemTap(Settings)">
-                    <Label col="0" text.decode="&#xf013;" class="nt-icon fas"/>
-                    <Label col="1" text="Settings" class="p-r-10"/>
+                <GridLayout columns="auto, *" class="p-4"
+                            :class="{ 'bg-gray-200': selectedPage === 'Settings' }"
+                            @tap="onNavigationItemTap(Settings, 'Settings')">
+                    <Label col="0" text.decode="&#xf013;" class="fas text-lg w-8"/>
+                    <Label col="1" text="Settings" class="text-base"/>
                 </GridLayout>
             </StackLayout>
         </ScrollView>
@@ -50,51 +50,28 @@
 </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";
+  import { $navigateTo } from 'nativescript-vue'
+  import * as utils from '~/shared/utils'
+  import Home from './Home.vue'
+  import Browse from './Browse.vue'
+  import Featured from './Featured.vue'
+  import Search from './Search.vue'
+  import Settings from './Settings.vue'
 
   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
+        selectedPage: 'Home'
+      }
     },
     methods: {
-      onNavigationItemTap(component) {
-        this.$navigateTo(component, {
+      onNavigationItemTap(component, pageName) {
+        this.selectedPage = pageName
+        $navigateTo(component, {
           clearHistory: true
-        });
-        utils.closeDrawer();
+        })
+        utils.closeDrawer()
       }
     }
-  };
+  }
 </script>
-
-<style scoped lang="scss">
-    // Start custom common variables
-    @import '@nativescript/theme/scss/variables/blue';
-    // End custom common variables
-
-    // Custom styles
-</style>
diff --git a/packages/template-drawer-navigation-vue/app/components/Featured.vue b/packages/template-drawer-navigation-vue/app/components/Featured.vue
index 361f8b03..d6c77a70 100644
--- a/packages/template-drawer-navigation-vue/app/components/Featured.vue
+++ b/packages/template-drawer-navigation-vue/app/components/Featured.vue
@@ -1,46 +1,27 @@
 <template>
-    <Page class="page">
-      <ActionBar class="action-bar">
-        <NavigationButton visibility="hidden"/>
-        <GridLayout columns="50, *">
-          <Label class="action-bar-title" text="Featured" colSpan="2"/>
+    <Page>
+        <ActionBar>
+            <GridLayout columns="auto, *">
+                <Label col="0" class="fas text-lg" text.decode="&#xf0c9;" @tap="onDrawerButtonTap"/>
+                <Label col="1" text="Featured" class="font-bold text-lg"/>
+            </GridLayout>
+        </ActionBar>
 
-          <Label class="fas" text.decode="&#xf0c9;" @tap="onDrawerButtonTap"/>
-        </GridLayout>
-      </ActionBar>
-
-        <GridLayout class="page__content">
-            <Label class="page__content-icon fas" text.decode="&#xf005;"/>
-            <Label class="page__content-placeholder" :text="message"/>
+        <GridLayout>
+            <Label class="fas text-7xl text-gray-400 text-center" style="vertical-align: top; margin-top: 20%" text.decode="&#xf005;"/>
+            <Label class="text-xl text-gray-400 text-center align-middle" text="Page content goes here"/>
         </GridLayout>
     </Page>
 </template>
 
 <script>
-  import * as utils from "~/shared/utils";
-  import { SelectedPageService } from "../shared/selected-page-service";
+  import * as utils from '~/shared/utils'
 
   export default {
-    mounted() {
-      SelectedPageService.getInstance().updateSelectedPage("Featured");
-    },
-    computed: {
-      message() {
-        return "<!-- Page content goes here -->";
-      }
-    },
     methods: {
       onDrawerButtonTap() {
-        utils.showDrawer();
+        utils.showDrawer()
       }
     }
-  };
+  }
 </script>
-
-<style scoped lang="scss">
-    // Start custom common variables
-    @import '@nativescript/theme/scss/variables/blue';
-    // End custom common variables
-
-    // Custom styles
-</style>
diff --git a/packages/template-drawer-navigation-vue/app/components/Home.vue b/packages/template-drawer-navigation-vue/app/components/Home.vue
index c4437771..dd72e843 100644
--- a/packages/template-drawer-navigation-vue/app/components/Home.vue
+++ b/packages/template-drawer-navigation-vue/app/components/Home.vue
@@ -1,46 +1,27 @@
 <template>
-    <Page class="page">
-      <ActionBar class="action-bar">
-        <NavigationButton visibility="hidden"/>
-        <GridLayout columns="50, *">
-          <Label class="action-bar-title" text="Home" colSpan="2"/>
+    <Page>
+        <ActionBar>
+            <GridLayout columns="auto, *">
+                <Label col="0" class="fas text-lg" text.decode="&#xf0c9;" @tap="onDrawerButtonTap"/>
+                <Label col="1" text="Home" class="font-bold text-lg"/>
+            </GridLayout>
+        </ActionBar>
 
-          <Label class="fas" text.decode="&#xf0c9;" @tap="onDrawerButtonTap"/>
-        </GridLayout>
-      </ActionBar>
-
-        <GridLayout class="page__content">
-            <Label class="page__content-icon fas" text.decode="&#xf015;"/>
-            <Label class="page__content-placeholder" :text="message"/>
+        <GridLayout>
+            <Label class="fas text-7xl text-gray-400 text-center" style="vertical-align: top; margin-top: 20%" text.decode="&#xf015;"/>
+            <Label class="text-xl text-gray-400 text-center align-middle" text="Page content goes here"/>
         </GridLayout>
     </Page>
 </template>
 
 <script>
-  import * as utils from "~/shared/utils";
-  import { SelectedPageService } from "../shared/selected-page-service";
+  import * as utils from '~/shared/utils'
 
   export default {
-    mounted() {
-      SelectedPageService.getInstance().updateSelectedPage("Home");
-    },
-    computed: {
-      message() {
-        return "<!-- Page content goes here -->";
-      }
-    },
     methods: {
       onDrawerButtonTap() {
-        utils.showDrawer();
+        utils.showDrawer()
       }
     }
-  };
+  }
 </script>
-
-<style scoped lang="scss">
-    // Start custom common variables
-    @import '@nativescript/theme/scss/variables/blue';
-    // End custom common variables
-
-    // Custom styles
-</style>
diff --git a/packages/template-drawer-navigation-vue/app/components/Search.vue b/packages/template-drawer-navigation-vue/app/components/Search.vue
index b2780849..fa306e25 100644
--- a/packages/template-drawer-navigation-vue/app/components/Search.vue
+++ b/packages/template-drawer-navigation-vue/app/components/Search.vue
@@ -1,46 +1,27 @@
 <template>
-    <Page class="page">
-      <ActionBar class="action-bar">
-        <NavigationButton visibility="hidden"/>
-        <GridLayout columns="50, *">
-          <Label class="action-bar-title" text="Search" colSpan="2"/>
+    <Page>
+        <ActionBar>
+            <GridLayout columns="auto, *">
+                <Label col="0" class="fas text-lg" text.decode="&#xf0c9;" @tap="onDrawerButtonTap"/>
+                <Label col="1" text="Search" class="font-bold text-lg"/>
+            </GridLayout>
+        </ActionBar>
 
-          <Label class="fas" text.decode="&#xf0c9;" @tap="onDrawerButtonTap"/>
-        </GridLayout>
-      </ActionBar>
-
-        <GridLayout class="page__content">
-            <Label class="page__content-icon fas" text.decode="&#xf002;"/>
-            <Label class="page__content-placeholder" :text="message"/>
+        <GridLayout>
+            <Label class="fas text-7xl text-gray-400 text-center" style="vertical-align: top; margin-top: 20%" text.decode="&#xf002;"/>
+            <Label class="text-xl text-gray-400 text-center align-middle" text="Page content goes here"/>
         </GridLayout>
     </Page>
 </template>
 
 <script>
-  import * as utils from "~/shared/utils";
-  import { SelectedPageService } from "../shared/selected-page-service";
+  import * as utils from '~/shared/utils'
 
   export default {
-    mounted() {
-      SelectedPageService.getInstance().updateSelectedPage("Search");
-    },
-    computed: {
-      message() {
-        return "<!-- Page content goes here -->";
-      }
-    },
     methods: {
       onDrawerButtonTap() {
-        utils.showDrawer();
+        utils.showDrawer()
       }
     }
-  };
+  }
 </script>
-
-<style scoped lang="scss">
-    // Start custom common variables
-    @import '@nativescript/theme/scss/variables/blue';
-    // End custom common variables
-
-    // Custom styles
-</style>
diff --git a/packages/template-drawer-navigation-vue/app/components/Settings.vue b/packages/template-drawer-navigation-vue/app/components/Settings.vue
index 5f88043e..efd36b42 100644
--- a/packages/template-drawer-navigation-vue/app/components/Settings.vue
+++ b/packages/template-drawer-navigation-vue/app/components/Settings.vue
@@ -1,46 +1,27 @@
 <template>
-    <Page class="page">
-      <ActionBar class="action-bar">
-        <NavigationButton visibility="hidden"/>
-        <GridLayout columns="50, *">
-          <Label class="action-bar-title" text="Settings" colSpan="2"/>
+    <Page>
+        <ActionBar>
+            <GridLayout columns="auto, *">
+                <Label col="0" class="fas text-lg" text.decode="&#xf0c9;" @tap="onDrawerButtonTap"/>
+                <Label col="1" text="Settings" class="font-bold text-lg"/>
+            </GridLayout>
+        </ActionBar>
 
-          <Label class="fas" text.decode="&#xf0c9;" @tap="onDrawerButtonTap"/>
-        </GridLayout>
-      </ActionBar>
-
-        <GridLayout class="page__content">
-            <Label class="page__content-icon fas" text.decode="&#xf013;"/>
-            <Label class="page__content-placeholder" :text="message"/>
+        <GridLayout>
+            <Label class="fas text-7xl text-gray-400 text-center" style="vertical-align: top; margin-top: 20%" text.decode="&#xf013;"/>
+            <Label class="text-xl text-gray-400 text-center align-middle" text="Page content goes here"/>
         </GridLayout>
     </Page>
 </template>
 
 <script>
-  import * as utils from "~/shared/utils";
-  import { SelectedPageService } from "../shared/selected-page-service";
+  import * as utils from '~/shared/utils'
 
   export default {
-    mounted() {
-      SelectedPageService.getInstance().updateSelectedPage("Settings");
-    },
-    computed: {
-      message() {
-        return "<!-- Page content goes here -->";
-      }
-    },
     methods: {
       onDrawerButtonTap() {
-        utils.showDrawer();
+        utils.showDrawer()
       }
     }
-  };
+  }
 </script>
-
-<style scoped lang="scss">
-    // Start custom common variables
-    @import '@nativescript/theme/scss/variables/blue';
-    // End custom common variables
-
-    // Custom styles
-</style>
diff --git a/packages/template-drawer-navigation-vue/app/shared/selected-page-service.js b/packages/template-drawer-navigation-vue/app/shared/selected-page-service.js
deleted file mode 100644
index 4b283a5b..00000000
--- a/packages/template-drawer-navigation-vue/app/shared/selected-page-service.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { BehaviorSubject } from 'rxjs'
-
-export 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()
-
diff --git a/packages/template-drawer-navigation-vue/app/shared/utils.js b/packages/template-drawer-navigation-vue/app/shared/utils.js
index 33267aef..8722cd32 100644
--- a/packages/template-drawer-navigation-vue/app/shared/utils.js
+++ b/packages/template-drawer-navigation-vue/app/shared/utils.js
@@ -1,15 +1,15 @@
 import { Application } from '@nativescript/core'
 
 export const showDrawer = () => {
-  let drawerNativeView = Application.getRootView()
-  if (drawerNativeView && drawerNativeView.showDrawer) {
-    drawerNativeView.showDrawer()
+  const root = Application.getRootView()
+  if (root && root.open) {
+    root.open()
   }
 }
 
 export const closeDrawer = () => {
-  let drawerNativeView = Application.getRootView()
-  if (drawerNativeView && drawerNativeView.showDrawer) {
-    drawerNativeView.closeDrawer()
+  const root = Application.getRootView()
+  if (root && root.close) {
+    root.close()
   }
 }
diff --git a/packages/template-drawer-navigation-vue/package.json b/packages/template-drawer-navigation-vue/package.json
index 42e3536b..a4086736 100644
--- a/packages/template-drawer-navigation-vue/package.json
+++ b/packages/template-drawer-navigation-vue/package.json
@@ -3,7 +3,7 @@
   "main": "app/app.js",
   "displayName": "Navigation Drawer",
   "templateType": "App template",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "Side navigation template using Vue.",
   "author": "NativeScript Team <oss@nativescript.org>",
   "license": "Apache-2.0",
@@ -42,13 +42,12 @@
   },
   "dependencies": {
     "@nativescript/core": "~9.0.0",
-    "@nativescript/theme": "^3.1.0",
-    "nativescript-ui-sidedrawer": "~15.2.0",
-    "nativescript-vue": "~2.9.3",
-    "rxjs": "~7.8.0"
+    "@nativescript-community/ui-drawer": "^1.0.0",
+    "nativescript-vue": "^3.0.0"
   },
   "devDependencies": {
-    "@nativescript/webpack": "5.0.24",
-    "nativescript-vue-template-compiler": "~2.9.3"
+    "@nativescript/tailwind": "^4.0.0",
+    "@nativescript/webpack": "~5.0.31",
+    "tailwindcss": "^4.0.0"
   }
 }
diff --git a/packages/template-tab-navigation-vue/app/_app-common.scss b/packages/template-tab-navigation-vue/app/_app-common.scss
deleted file mode 100644
index b6e669af..00000000
--- a/packages/template-tab-navigation-vue/app/_app-common.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@import '@nativescript/theme/core';
-@import '@nativescript/theme/default';
-
-// 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
-.fab {
-  font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
-  font-weight: 400;
-}
-
-.fas {
-  font-family: 'Font Awesome 5 Free', 'fa-solid-900';
-  font-weight: 900;
-}
-
-.far {
-  font-family: 'Font Awesome 5 Free', 'fa-regular-400';
-  font-weight: 400;
-}
-
-// Custom tabstrip item class
-.navigation__item {
-  &:active,
-  &:active Label {
-    @include colorize($color: complementary);
-  }
-}
-
-// Common page class
-.page__content {
-  &-icon,
-  &-placeholder {
-    color: const(grey);
-    font-size: 20;
-    vertical-align: center;
-    horizontal-align: center;
-  }
-
-  &-icon {
-    font-size: 72;
-    vertical-align: top;
-    margin-top: 20%;
-  }
-}
diff --git a/packages/template-tab-navigation-vue/app/app.android.scss b/packages/template-tab-navigation-vue/app/app.android.scss
deleted file mode 100644
index 52162715..00000000
--- a/packages/template-tab-navigation-vue/app/app.android.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Import common styles
-@import 'app-common';
-
-// Place any CSS rules you want to apply only on Android here
diff --git a/packages/template-tab-navigation-vue/app/app.css b/packages/template-tab-navigation-vue/app/app.css
new file mode 100644
index 00000000..6d13c799
--- /dev/null
+++ b/packages/template-tab-navigation-vue/app/app.css
@@ -0,0 +1,21 @@
+@import "tailwindcss";
+
+ActionBar {
+    background-color: #65adf1;
+    color: white;
+}
+
+.fas {
+    font-family: 'Font Awesome 5 Free', 'fa-solid-900';
+    font-weight: 900;
+}
+
+.far {
+    font-family: 'Font Awesome 5 Free', 'fa-regular-400';
+    font-weight: 400;
+}
+
+.fab {
+    font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
+    font-weight: 400;
+}
diff --git a/packages/template-tab-navigation-vue/app/app.ios.scss b/packages/template-tab-navigation-vue/app/app.ios.scss
deleted file mode 100644
index 93aa9c27..00000000
--- a/packages/template-tab-navigation-vue/app/app.ios.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Import common styles
-@import 'app-common';
-
-// Place any CSS rules you want to apply only on iOS here
diff --git a/packages/template-tab-navigation-vue/app/app.js b/packages/template-tab-navigation-vue/app/app.js
index d0fd86ee..b7d3460a 100644
--- a/packages/template-tab-navigation-vue/app/app.js
+++ b/packages/template-tab-navigation-vue/app/app.js
@@ -1,7 +1,5 @@
-import Vue from 'nativescript-vue'
+import { createApp } from 'nativescript-vue'
 
-import App from './components/App'
+import App from './components/App.vue'
 
-new Vue({
-  render: (h) => h(App),
-}).$start()
+createApp(App).start()
diff --git a/packages/template-tab-navigation-vue/app/components/App.vue b/packages/template-tab-navigation-vue/app/components/App.vue
index 0c3539a7..970edd49 100644
--- a/packages/template-tab-navigation-vue/app/components/App.vue
+++ b/packages/template-tab-navigation-vue/app/components/App.vue
@@ -1,29 +1,29 @@
-<template lang="html">
+<template>
     <TabView androidTabsPosition="bottom">
         <TabViewItem title="Home">
             <Frame id="items">
-                <Items/>
+                <Items />
             </Frame>
         </TabViewItem>
 
         <TabViewItem title="Browse">
             <Frame id="browse">
-                <Browse/>
+                <Browse />
             </Frame>
         </TabViewItem>
 
         <TabViewItem title="Search">
             <Frame id="search">
-                <Search/>
+                <Search />
             </Frame>
         </TabViewItem>
     </TabView>
 </template>
 
 <script>
-  import Items from "./Items.vue";
-  import Browse from "./Browse.vue";
-  import Search from "./Search.vue";
+  import Items from './Items.vue'
+  import Browse from './Browse.vue'
+  import Search from './Search.vue'
 
   export default {
     components: {
@@ -31,14 +31,5 @@
       Browse,
       Search
     }
-  };
+  }
 </script>
-
-<style lang="scss">
-    // Start custom common variables
-    @import "@nativescript/theme/scss/variables/blue";
-    // End custom common variables
-
-    // Custom styles
-
-</style>
diff --git a/packages/template-tab-navigation-vue/app/components/Browse.vue b/packages/template-tab-navigation-vue/app/components/Browse.vue
index 7c84d237..703cb79a 100644
--- a/packages/template-tab-navigation-vue/app/components/Browse.vue
+++ b/packages/template-tab-navigation-vue/app/components/Browse.vue
@@ -1,31 +1,16 @@
-<template lang="html">
+<template>
     <Page>
         <ActionBar>
-            <Label text="Browse"></Label>
+            <Label text="Browse"/>
         </ActionBar>
 
-        <GridLayout class="page__content">
-            <Label class="page__content-icon far" text.decode="&#xf1ea;"></Label>
-            <Label class="page__content-placeholder" :text="message"></Label>
+        <GridLayout>
+            <Label class="far text-7xl text-gray-400 text-center" style="vertical-align: top; margin-top: 20%" text.decode="&#xf1ea;"/>
+            <Label class="text-xl text-gray-400 text-center align-middle" text="Browse page content goes here"/>
         </GridLayout>
     </Page>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        message: "<!-- Browse page content goes here -->"
-      };
-    }
-  }
+  export default {}
 </script>
-
-<style lang="scss" scoped>
-    // Start custom common variables
-    @import "@nativescript/theme/scss/variables/blue";
-    // End custom common variables
-
-    // Custom styles
-
-</style>
diff --git a/packages/template-tab-navigation-vue/app/components/ItemDetails.vue b/packages/template-tab-navigation-vue/app/components/ItemDetails.vue
index 65cf4300..7d6e6e2a 100644
--- a/packages/template-tab-navigation-vue/app/components/ItemDetails.vue
+++ b/packages/template-tab-navigation-vue/app/components/ItemDetails.vue
@@ -2,26 +2,17 @@
     <Page>
         <ActionBar>
             <NavigationButton @tap="$navigateBack()" android.systemIcon="ic_menu_back"/>
-            <Label :text="item.name"></Label>
+            <Label :text="item.name"/>
         </ActionBar>
 
         <GridLayout>
-            <Label class="m-10 h3" :text="item.description" verticalAlignment="top"></Label>
+            <Label class="m-2 text-lg" :text="item.description" verticalAlignment="top"/>
         </GridLayout>
     </Page>
 </template>
 
 <script>
   export default {
-    props: ["item"],
-  };
+    props: ['item']
+  }
 </script>
-
-<style scoped lang="scss">
-    // Start custom common variables
-    @import "@nativescript/theme/scss/variables/blue";
-    // End custom common variables
-
-    // Custom styles
-
-</style>
diff --git a/packages/template-tab-navigation-vue/app/components/Items.vue b/packages/template-tab-navigation-vue/app/components/Items.vue
index d71a7361..fe816570 100644
--- a/packages/template-tab-navigation-vue/app/components/Items.vue
+++ b/packages/template-tab-navigation-vue/app/components/Items.vue
@@ -1,115 +1,59 @@
 <template>
     <Page>
         <ActionBar>
-            <Label text="Home"></Label>
+            <Label text="Home"/>
         </ActionBar>
 
-        <ListView for="item in items" @itemTap="onItemTap">
-            <v-template>
+        <ListView :items="items" @itemTap="onItemTap">
+            <template #default="{ item }">
                 <StackLayout orientation="horizontal">
-                    <Label :text="item.name" textWrap="true"></Label>
+                    <Label :text="item.name" textWrap="true"/>
                 </StackLayout>
-            </v-template>
+            </template>
         </ListView>
     </Page>
 </template>
 
 <script>
-  import ItemDetails from "./ItemDetails";
+  import { $navigateTo } from 'nativescript-vue'
+  import ItemDetails from './ItemDetails.vue'
 
   export default {
     data() {
       return {
         items: [
-          {
-            name: "Item 1",
-            description: "Description for Item 1"
-          },
-          {
-            name: "Item 2",
-            description: "Description for Item 2"
-          },
-          {
-            name: "Item 3",
-            description: "Description for Item 3"
-          },
-          {
-            name: "Item 4",
-            description: "Description for Item 4"
-          },
-          {
-            name: "Item 5",
-            description: "Description for Item 5"
-          },
-          {
-            name: "Item 6",
-            description: "Description for Item 6"
-          },
-          {
-            name: "Item 7",
-            description: "Description for Item 7"
-          },
-          {
-            name: "Item 8",
-            description: "Description for Item 8"
-          },
-          {
-            name: "Item 9",
-            description: "Description for Item 9"
-          },
-          {
-            name: "Item 10",
-            description: "Description for Item 10"
-          },
-          {
-            name: "Item 11",
-            description: "Description for Item 11"
-          },
-          {
-            name: "Item 12",
-            description: "Description for Item 12"
-          },
-          {
-            name: "Item 13",
-            description: "Description for Item 13"
-          },
-          {
-            name: "Item 14",
-            description: "Description for Item 14"
-          },
-          {
-            name: "Item 15",
-            description: "Description for Item 15"
-          },
-          {
-            name: "Item 16",
-            description: "Description for Item 16"
-          }
+          { name: "Item 1", description: "Description for Item 1" },
+          { name: "Item 2", description: "Description for Item 2" },
+          { name: "Item 3", description: "Description for Item 3" },
+          { name: "Item 4", description: "Description for Item 4" },
+          { name: "Item 5", description: "Description for Item 5" },
+          { name: "Item 6", description: "Description for Item 6" },
+          { name: "Item 7", description: "Description for Item 7" },
+          { name: "Item 8", description: "Description for Item 8" },
+          { name: "Item 9", description: "Description for Item 9" },
+          { name: "Item 10", description: "Description for Item 10" },
+          { name: "Item 11", description: "Description for Item 11" },
+          { name: "Item 12", description: "Description for Item 12" },
+          { name: "Item 13", description: "Description for Item 13" },
+          { name: "Item 14", description: "Description for Item 14" },
+          { name: "Item 15", description: "Description for Item 15" },
+          { name: "Item 16", description: "Description for Item 16" }
         ]
-      };
+      }
     },
     methods: {
       onItemTap(args) {
-        this.$navigateTo(ItemDetails, {
+        $navigateTo(ItemDetails, {
           frame: 'items',
-          props: {item: args.item},
+          props: { item: args.item },
           animated: true,
           transition: {
             name: "slide",
             duration: 200,
             curve: "ease"
           }
-        });
+        })
       }
     }
-  };
+  }
 </script>
-
-<style scoped lang="scss">
-    // Start custom common variables
-    @import "@nativescript/theme/scss/variables/blue";
-    // End custom common variables
-
-    // Custom styles
-
-</style>
diff --git a/packages/template-tab-navigation-vue/app/components/Search.vue b/packages/template-tab-navigation-vue/app/components/Search.vue
index 473c03d9..b54b1ad2 100644
--- a/packages/template-tab-navigation-vue/app/components/Search.vue
+++ b/packages/template-tab-navigation-vue/app/components/Search.vue
@@ -1,31 +1,16 @@
-<template lang="html">
+<template>
     <Page>
         <ActionBar>
-            <Label text="Search"></Label>
+            <Label text="Search"/>
         </ActionBar>
 
-        <GridLayout class="page__content">
-            <Label class="page__content-icon fas" text.decode="&#xf002;"></Label>
-            <Label class="page__content-placeholder" :text="message"></Label>
+        <GridLayout>
+            <Label class="fas text-7xl text-gray-400 text-center" style="vertical-align: top; margin-top: 20%" text.decode="&#xf002;"/>
+            <Label class="text-xl text-gray-400 text-center align-middle" text="Search page content goes here"/>
         </GridLayout>
     </Page>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        message: "<!-- Search page content goes here -->"
-      };
-    }
-  }
+  export default {}
 </script>
-
-<style lang="scss" scoped>
-    // Start custom common variables
-    @import "@nativescript/theme/scss/variables/blue";
-    // End custom common variables
-
-    // Custom styles
-
-</style>
diff --git a/packages/template-tab-navigation-vue/package.json b/packages/template-tab-navigation-vue/package.json
index 1c76ae69..2b8d25e9 100644
--- a/packages/template-tab-navigation-vue/package.json
+++ b/packages/template-tab-navigation-vue/package.json
@@ -2,7 +2,7 @@
   "name": "@nativescript/template-tab-navigation-vue",
   "main": "app/app.js",
   "displayName": "Tabs",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "Tabbed interface template using Vue",
   "author": "NativeScript Team <oss@nativescript.org>",
   "license": "Apache-2.0",
@@ -41,11 +41,11 @@
   ],
   "dependencies": {
     "@nativescript/core": "~9.0.0",
-    "@nativescript/theme": "^3.1.0",
-    "nativescript-vue": "~2.9.3"
+    "nativescript-vue": "^3.0.0"
   },
   "devDependencies": {
-    "@nativescript/webpack": "5.0.24",
-    "nativescript-vue-template-compiler": "~2.9.3"
+    "@nativescript/tailwind": "^4.0.0",
+    "@nativescript/webpack": "~5.0.31",
+    "tailwindcss": "^4.0.0"
   }
 }