chore: migrate eslint config

.eslintrc

 {
-  "extends": "@nuxtjs/eslint-config-typescript",
+  "extends": "@nuxt",
   "rules": {
     "vue/no-v-html": "off",
     "vue/no-multiple-template-root": "off"

components/ItemListNav.vue

@@ -10,15 +10,27 @@ const hasMore = computed(() => props.page < props.maxPage)
 
 <template>
   <div class="news-list-nav">
-    <NuxtLink v-if="page > 1" :to="`/${feed}/${page - 1}`">
+    <NuxtLink
+      v-if="page > 1"
+      :to="`/${feed}/${page - 1}`"
+    >
       &lt; prev
     </NuxtLink>
-    <span v-else class="disabled">&lt; prev</span>
+    <span
+      v-else
+      class="disabled"
+    >&lt; prev</span>
     <span class="page">{{ page }}/{{ maxPage }}</span>
-    <NuxtLink v-if="hasMore" :to="`/${feed}/${page + 1}`">
+    <NuxtLink
+      v-if="hasMore"
+      :to="`/${feed}/${page + 1}`"
+    >
       more &gt;
     </NuxtLink>
-    <span v-else class="disabled">more &gt;</span>
+    <span
+      v-else
+      class="disabled"
+    >more &gt;</span>
   </div>
 </template>
 

components/LoadingWrapper.vue

@@ -5,7 +5,10 @@ defineProps<{
 </script>
 
 <template>
-  <div v-if="loading" style="text-align:center">
+  <div
+    v-if="loading"
+    style="text-align:center"
+  >
     <LoadSpinner />
   </div>
   <slot v-else />

components/PostComment.vue

@@ -16,20 +16,37 @@ function pluralize (n: number) {
 </script>
 
 <template>
-  <li v-if="comment && comment.user" class="comment">
+  <li
+    v-if="comment && comment.user"
+    class="comment"
+  >
     <div class="by">
       <NuxtLink :to="'/user/' + comment.user">
         {{ comment.user }}
       </NuxtLink>
       {{ timeAgo(comment.time) }} ago
     </div>
-    <div class="text" v-html="comment.content" />
-    <div v-if="comment.comments && comment.comments.length" :class="{ open }" class="toggle">
+    <div
+      class="text"
+      v-html="comment.content"
+    />
+    <div
+      v-if="comment.comments && comment.comments.length"
+      :class="{ open }"
+      class="toggle"
+    >
       <a @click="open = !open">{{ open ? '[-]' : '[+] ' + pluralize(comment.comments.length) + ' collapsed' }}
       </a>
     </div>
-    <ul v-show="open" class="comment-children">
-      <PostComment v-for="childComment in comment.comments" :key="childComment.id" :comment="childComment" />
+    <ul
+      v-show="open"
+      class="comment-children"
+    >
+      <PostComment
+        v-for="childComment in comment.comments"
+        :key="childComment.id"
+        :comment="childComment"
+      />
     </ul>
   </li>
 </template>

components/PostItem.vue

@@ -8,10 +8,17 @@ defineProps<{
 
 <template>
   <li class="news-item">
-    <span class="score" title="Score">{{ item.points }}</span>
+    <span
+      class="score"
+      title="Score"
+    >{{ item.points }}</span>
     <span class="title">
       <template v-if="isAbsolute(item.url)">
-        <a :href="item.url" target="_blank" rel="noopener">{{ item.title }}</a>
+        <a
+          :href="item.url"
+          target="_blank"
+          rel="noopener"
+        >{{ item.title }}</a>
         <span class="host"> ({{ host(item.url) }})</span>
       </template>
       <template v-else>
@@ -20,7 +27,10 @@ defineProps<{
     </span>
     <br>
     <span class="meta">
-      <span v-if="item.type !== 'job'" class="by">
+      <span
+        v-if="item.type !== 'job'"
+        class="by"
+      >
         by
         <NuxtLink :to="'/user/' + item.user">{{ item.user }}</NuxtLink>
       </span>
@@ -28,7 +38,10 @@ defineProps<{
         {{ timeAgo(item.time) }} ago
       </span>
       |
-      <span v-if="item.type !== 'job'" class="comments-link">
+      <span
+        v-if="item.type !== 'job'"
+        class="comments-link"
+      >
         <NuxtLink :to="'/item/' + item.id">{{ item.comments_count }} comments</NuxtLink>
       </span>
     </span>

layouts/default.vue

@@ -17,14 +17,33 @@ useHead({
 <template>
   <div>
     <header class="header">
-      <nav class="inner" role="navigation">
-        <NuxtLink to="/" exact>
-          <img class="logo" src="/logo.svg" alt="logo">
+      <nav
+        class="inner"
+        role="navigation"
+      >
+        <NuxtLink
+          to="/"
+          exact
+        >
+          <img
+            class="logo"
+            src="/logo.svg"
+            alt="logo"
+          >
         </NuxtLink>
-        <NuxtLink v-for="(list, key) in feedsInfo" :key="key" :to="`/${key}`">
+        <NuxtLink
+          v-for="(list, key) in feedsInfo"
+          :key="key"
+          :to="`/${key}`"
+        >
           {{ list.title }}
         </NuxtLink>
-        <a class="github" href="https://github.com/nuxt/hackernews" target="_blank" rel="noopener banner">
+        <a
+          class="github"
+          href="https://github.com/nuxt/hackernews"
+          target="_blank"
+          rel="noopener banner"
+        >
           Built with Nuxt3
         </a>
       </nav>

package.json

@@ -28,7 +28,7 @@
     "node": ">=v18.13.0"
   },
   "devDependencies": {
-    "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@nuxt/eslint-config": "^0.1.1",
     "@types/node": "^18.14.6",
     "eslint": "^8.35.0",
     "nuxt": "^3.2.3",

pages/[feed]/[page].vue

@@ -31,7 +31,7 @@ const maxPage = computed(() => {
   return +(feedsInfo[feed.value]?.pages) || 0
 })
 
-function pageChanged (to: number, _from = -1) {
+function pageChanged (to: number) {
   if (!isValidFeed.value) { return }
 
   if (to <= 0 || to > maxPage.value) {
@@ -55,20 +55,35 @@ function pageChanged (to: number, _from = -1) {
 }
 
 onMounted(() => pageChanged(page.value))
-watch(page, (to, old) => pageChanged(to, old))
+watch(page, to => pageChanged(to))
 </script>
 
 <template>
   <div class="view">
-    <ItemListNav :feed="feed" :page="page" :max-page="maxPage" />
-
-    <div :key="displayedPage" class="news-list">
+    <ItemListNav
+      :feed="feed"
+      :page="page"
+      :max-page="maxPage"
+    />
+
+    <div
+      :key="displayedPage"
+      class="news-list"
+    >
       <LoadSpinner v-if="loading" />
       <template v-else>
         <ul>
-          <PostItem v-for="item in items" :key="item.id" :item="item" />
+          <PostItem
+            v-for="item in items"
+            :key="item.id"
+            :item="item"
+          />
         </ul>
-        <ItemListNav :feed="feed" :page="page" :max-page="maxPage" />
+        <ItemListNav
+          :feed="feed"
+          :page="page"
+          :max-page="maxPage"
+        />
       </template>
     </div>
   </div>

pages/item/[id].vue

@@ -15,13 +15,20 @@ useHead({
 
 <template>
   <div class="item-view view">
-    <div v-if="!item?.url" class="item-view-header">
+    <div
+      v-if="!item?.url"
+      class="item-view-header"
+    >
       <h1>Page not found</h1>
     </div>
     <template v-else>
       <div class="item-view-header">
         <template v-if="isAbsolute(item.url)">
-          <a :href="item.url" target="_blank" rel="noopener"><h1 v-text="item.title" /></a>
+          <a
+            :href="item.url"
+            target="_blank"
+            rel="noopener"
+          ><h1 v-text="item.title" /></a>
           <span class="host"> ({{ host(item.url) }})</span>
         </template>
         <template v-else>
@@ -41,7 +48,11 @@ useHead({
             {{ comments ? comments.length + ' comments' : 'No comments yet.' }}
           </p>
           <ul class="comment-children">
-            <PostComment v-for="comment in comments" :key="comment.id" :comment="comment" />
+            <PostComment
+              v-for="comment in comments"
+              :key="comment.id"
+              :comment="comment"
+            />
           </ul>
         </LoadingWrapper>
       </div>

pages/user/[id].vue

@@ -28,7 +28,11 @@ useHead({
         <li>
           <span class="label">Karma:</span> {{ user.karma || '-' }}
         </li>
-        <li v-if="user.about" class="about" v-html="user.about" />
+        <li
+          v-if="user.about"
+          class="about"
+          v-html="user.about"
+        />
       </ul>
       <p class="links">
         <a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a> |