refactor: use `<nav>` instead of `<div id="nav">`

See https://github.com/vuejs/vue-cli/pull/6812

diff --git a/template/code/router/src/App.vue b/template/code/router/src/App.vue
index fe3afbf613ab53a6f7ad3acb1b38354053bad285..37edbaf4e3a02bc143496d03502d1b1cdc9101c1 100644 (file)
--- a/template/code/router/src/App.vue
+++ b/template/code/router/src/App.vue
@@ -9,10 +9,10 @@ import HelloWorld from '@/components/HelloWorld.vue'
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
 
-      <div id="nav">
+      <nav>
         <router-link to="/">Home</router-link>
         <router-link to="/about">About</router-link>
-      </div>
+      </nav>
     </div>
   </header>
 
@@ -53,28 +53,28 @@ a,
   }
 }
 
-#nav {
+nav {
   width: 100%;
   font-size: 12px;
   text-align: center;
   margin-top: 2rem;
 }
 
-#nav a.router-link-exact-active {
+nav a.router-link-exact-active {
   color: var(--color-text);
 }
 
-#nav a.router-link-exact-active:hover {
+nav a.router-link-exact-active:hover {
   background-color: transparent;
 }
 
-#nav a {
+nav a {
   display: inline-block;
   padding: 0 1rem;
   border-left: 1px solid var(--color-border);
 }
 
-#nav a:first-of-type {
+nav a:first-of-type {
   border: 0;
 }
 
@@ -106,7 +106,7 @@ a,
     margin: 0 2rem 0 0;
   }
 
-  #nav {
+  nav {
     text-align: left;
     margin-left: -1rem;
     font-size: 1rem;

diff --git a/template/code/typescript-router/src/App.vue b/template/code/typescript-router/src/App.vue
index 36ae7808a4f5b75ce47762c3fce0da451d04fd07..8a1e9b196ed79b4cb5e69eb4ef7f54fa049683dc 100644 (file)
--- a/template/code/typescript-router/src/App.vue
+++ b/template/code/typescript-router/src/App.vue
@@ -9,10 +9,10 @@ import HelloWorld from '@/components/HelloWorld.vue'
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
 
-      <div id="nav">
+      <nav>
         <router-link to="/">Home</router-link>
         <router-link to="/about">About</router-link>
-      </div>
+      </nav>
     </div>
   </header>
 
@@ -53,28 +53,28 @@ a,
   }
 }
 
-#nav {
+nav {
   width: 100%;
   font-size: 12px;
   text-align: center;
   margin-top: 2rem;
 }
 
-#nav a.router-link-exact-active {
+nav a.router-link-exact-active {
   color: var(--color-text);
 }
 
-#nav a.router-link-exact-active:hover {
+nav a.router-link-exact-active:hover {
   background-color: transparent;
 }
 
-#nav a {
+nav a {
   display: inline-block;
   padding: 0 1rem;
   border-left: 1px solid var(--color-border);
 }
 
-#nav a:first-of-type {
+nav a:first-of-type {
   border: 0;
 }
 
@@ -106,7 +106,7 @@ a,
     margin: 0 2rem 0 0;
   }
 
-  #nav {
+  nav {
     text-align: left;
     margin-left: -1rem;
     font-size: 1rem;