feat: all templates use vue 3 by default

packages/template-blank-vue-ts/app/app.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 ActionBar {
     background-color: #65adf1;

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()

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>

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"
   }
 }

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
 }

packages/template-blank-vue/app/app.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 ActionBar {
     background-color: #65adf1;

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()

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"
   }
 }

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;
+}

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()