From ab417e817c4625c8091873bf93b2f4c6f11a1af9 Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Mon, 11 Sep 2023 16:18:40 -0400
Subject: [PATCH] fix(vue): fix routing files

---
 .../files/common/src/App.vue.template         | 34 ++++++++++++++++++-
 .../files/common/src/main.ts.template         |  9 ++++-
 .../routing/src/views/AboutView.vue.template  |  9 ++---
 .../routing/src/views/HomeView.vue.template   |  4 +--
 4 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/packages/vue/src/generators/application/files/common/src/App.vue.template b/packages/vue/src/generators/application/files/common/src/App.vue.template
index 5aab956fb91fe..37c59f5b84e74 100644
--- a/packages/vue/src/generators/application/files/common/src/App.vue.template
+++ b/packages/vue/src/generators/application/files/common/src/App.vue.template
@@ -13,9 +13,41 @@ import NxWelcome from './components/NxWelcome.vue';
         <RouterLink to="/about">About</RouterLink>
       </nav>
     </header>
-
     <RouterView />
   <% } else { %>
     <NxWelcome title="<%= title %>" />
   <% } %>
 </template>
+
+<% if (routing && style !== 'none') { %>
+<style scoped lang="<%= style %>">
+header {
+  line-height: 1.5;
+  max-width: 100vw;
+}
+
+nav > a {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@media (min-width: 768px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 768px;
+  }
+
+  nav {
+    text-align: left;
+    font-size: 1rem;
+
+    padding: 1rem 0;
+    margin-top: 1rem;
+  }
+}
+</style>
+<% } %>
diff --git a/packages/vue/src/generators/application/files/common/src/main.ts.template b/packages/vue/src/generators/application/files/common/src/main.ts.template
index c3e0ac7e61f37..1221a42662b36 100644
--- a/packages/vue/src/generators/application/files/common/src/main.ts.template
+++ b/packages/vue/src/generators/application/files/common/src/main.ts.template
@@ -1,8 +1,15 @@
 <% if (style !== 'none') { %>
 import './styles.<%= style %>';
 <% } %>
+<% if (routing) { %>
+import router from './router';
+<% } %>
 
 import { createApp } from 'vue';
 import App from './App.vue';
 
-createApp(App).mount('#root');
+const app = createApp(App);
+<% if (routing) { %>
+app.use(router);
+<% } %>
+app.mount('#root');
diff --git a/packages/vue/src/generators/application/files/routing/src/views/AboutView.vue.template b/packages/vue/src/generators/application/files/routing/src/views/AboutView.vue.template
index 756ad2a179098..0fb2cc027ea9b 100644
--- a/packages/vue/src/generators/application/files/routing/src/views/AboutView.vue.template
+++ b/packages/vue/src/generators/application/files/routing/src/views/AboutView.vue.template
@@ -5,11 +5,12 @@
 </template>
 
 <style>
-@media (min-width: 1024px) {
+@media (min-width: 768px) {
   .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
+    max-width: 768px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0 1rem;
   }
 }
 </style>
diff --git a/packages/vue/src/generators/application/files/routing/src/views/HomeView.vue.template b/packages/vue/src/generators/application/files/routing/src/views/HomeView.vue.template
index a0897f23126ef..718d800c819e3 100644
--- a/packages/vue/src/generators/application/files/routing/src/views/HomeView.vue.template
+++ b/packages/vue/src/generators/application/files/routing/src/views/HomeView.vue.template
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import TheWelcome from '../TheWelcome.vue'
+import NxWelcome from '../components/NxWelcome.vue'
 </script>
 
 <template>
   <main>
-    <TheWelcome />
+    <NxWelcome />
   </main>
 </template>