feat: migration to nuxt3

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "@nuxtjs/eslint-config-typescript",
+  "rules": {
+    "vue/no-v-html": "off"
+  }
+}

.gitignore

@@ -8,7 +8,8 @@ package-lock.json
 *.iml
 .nuxt
 .vscode
+.output
 
-static/manifest*.json
-static/sw.js
-static/workbox-sw*.js*
+public/manifest*.json
+public/sw.js
+public/workbox-sw*.js*

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

components/Comment.vue

@@ -1,10 +1,27 @@
+<script setup lang="ts">
+import { timeAgo } from '~/composables/utils'
+
+defineProps({
+  comment: {
+    type: Object,
+    required: true
+  }
+})
+
+const open = ref(true)
+
+function pluralize (n: number) {
+  return n + (n === 1 ? ' reply' : ' replies')
+}
+</script>
+
 <template>
   <li v-if="comment && comment.user" class="comment">
     <div class="by">
-      <router-link :to="'/user/' + comment.user">
+      <RouterLink :to="'/user/' + comment.user">
         {{ comment.user }}
-      </router-link>
-      {{ comment.time | timeAgo }} ago
+      </RouterLink>
+      {{ timeAgo(comment.time) }} ago
     </div>
     <div class="text" v-html="comment.content" />
     <div v-if="comment.comments && comment.comments.length" :class="{ open }" class="toggle">
@@ -17,26 +34,6 @@
   </li>
 </template>
 
-<script>
-export default {
-  name: 'Comment',
-  props: {
-    comment: {
-      type: Object,
-      required: true
-    }
-  },
-  data () {
-    return {
-      open: true
-    }
-  },
-  methods: {
-    pluralize: n => n + (n === 1 ? ' reply' : ' replies')
-  }
-}
-</script>
-
 <style lang="stylus">
 .comment-children {
   .comment-children {

components/Item.vue

@@ -1,49 +1,40 @@
+<script setup lang="ts">
+import { timeAgo, isAbsolute } from '~/composables/utils'
+
+defineProps<{
+  item: any
+}>()
+</script>
+
 <template>
   <li class="news-item">
     <span class="score">{{ item.points }}</span>
     <span class="title">
       <template v-if="isAbsolute(item.url)">
         <a :href="item.url" target="_blank" rel="noopener">{{ item.title }}</a>
-        <span class="host"> ({{ item.url | host }})</span>
+        <span class="host"> ({{ timeAgo(item.url) }})</span>
       </template>
       <template v-else>
-        <router-link :to="'/item/' + item.id">{{ item.title }}</router-link>
+        <RouterLink :to="'/item/' + item.id">{{ item.title }}</RouterLink>
       </template>
     </span>
     <br>
     <span class="meta">
       <span v-if="item.type !== 'job'" class="by">
         by
-        <router-link :to="'/user/' + item.user">{{ item.user }}</router-link>
+        <RouterLink :to="'/user/' + item.user">{{ item.user }}</RouterLink>
       </span>
       <span class="time">
-        {{ item.time | timeAgo }} ago
+        {{ timeAgo(item.time) }} ago
       </span>
       <span v-if="item.type !== 'job'" class="comments-link">
         |
-        <router-link :to="'/item/' + item.id">{{ item.comments_count }} comments</router-link>
+        <RouterLink :to="'/item/' + item.id">{{ item.comments_count }} comments</RouterLink>
       </span>
     </span>
   </li>
 </template>
 
-<script>
-export default {
-  name: 'NewsItem',
-  props: {
-    item: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    isAbsolute (url) {
-      return /^https?:\/\//.test(url)
-    }
-  }
-}
-</script>
-
 <style lang="stylus">
 .news-item {
   background-color: #fff;

components/ItemListNav.vue

@@ -1,41 +1,27 @@
+<script setup lang="ts">
+const props = defineProps<{
+  feed: string,
+  page: number,
+  maxPage: number
+}>()
+
+const hasMore = $computed(() => props.page < props.maxPage)
+</script>
+
 <template>
   <div class="news-list-nav">
-    <router-link v-if="page > 1" :to="`/${feed}/${page - 1}`">
+    <RouterLink v-if="page > 1" :to="`/${feed}/${page - 1}`">
       &lt; prev
-    </router-link>
+    </RouterLink>
     <a v-else class="disabled">&lt; prev</a>
     <span>{{ page }}/{{ maxPage }}</span>
-    <router-link v-if="hasMore" :to="`/${feed}/${page + 1}`">
+    <RouterLink v-if="hasMore" :to="`/${feed}/${page + 1}`">
       more &gt;
-    </router-link>
+    </RouterLink>
     <a v-else class="disabled">more &gt;</a>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    feed: {
-      type: String,
-      required: true
-    },
-    page: {
-      type: Number,
-      required: true
-    },
-    maxPage: {
-      type: Number,
-      required: true
-    }
-  },
-  computed: {
-    hasMore () {
-      return this.page < this.maxPage
-    }
-  }
-}
-</script>
-
 <style lang="stylus">
 .news-list-nav, .news-list {
   background-color: #fff;

components/LoadingWrapper.ts

@@ -0,0 +1,20 @@
+import { defineComponent, h } from 'vue'
+import Spinner from './Spinner.vue'
+
+export default defineComponent({
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup (props, { slots }) {
+    return () => {
+      return props.loading
+        ? h('div', { style: { 'text-align': 'center' } }, [
+          h(Spinner, { show: true })
+        ])
+        : slots.default?.()
+    }
+  }
+})

components/Spinner.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+  show: boolean
+}>()
+</script>
+
 <template>
   <transition>
     <svg
@@ -21,18 +27,6 @@
   </transition>
 </template>
 
-<script>
-export default {
-  name: 'Spinner',
-  props: {
-    show: {
-      type: Boolean,
-      required: true
-    }
-  }
-}
-</script>
-
 <style lang="stylus">
 $offset = 126;
 $duration = 1.4s;

common/api.js → composables/api.ts

@@ -1,9 +1,9 @@
-export const feeds = {
+export const feedsInfo = {
   news: { title: 'News', pages: 10 },
   newest: { title: 'Newest', pages: 12 },
   ask: { title: 'Ask', pages: 2 },
   show: { title: 'Show', pages: 2 },
   jobs: { title: 'Jobs', pages: 1 }
 }
 
-export const validFeeds = Object.keys(feeds)
+export const validFeeds = Object.keys(feedsInfo)