fix(vue): fix routing files

nrwl · Sep 12, 2023 · ab417e8 · ab417e8
1 parent 5611f87
commit ab417e8
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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>