refactor: migrate to nuxt 3 (nuxt#297)

.eslintrc

@@ -9,8 +9,11 @@
   ],
   "rules": {
     "no-console": "off",
+    "import/no-named-as-default": "off",
     // handled by Volar
     "@typescript-eslint/no-unused-vars": "off",
-    "vue/multi-word-component-names": "off"
+    "vue/multi-word-component-names": "off",
+    // vue 3, TODO: upgrade eslint-plugin-vue
+    "vue/no-v-for-template-key": "off"
   }
 }

.github/workflows/ci.yml

@@ -39,7 +39,7 @@ jobs:
 
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile
+        run: yarn --immutable
 
       - name: Lint
         run: yarn lint

tsconfig.json

@@ -1,18 +1,3 @@
 {
-  "extends": "./website/.nuxt/tsconfig.json",
-  "compilerOptions": {
-    "target": "ESNext",
-    "esModuleInterop": true,
-    "strict": false,
-    "noImplicitAny": false,
-    "allowJs": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true
-  },
-  "vueCompilerOptions": {
-    "experimentalCompatMode": 2,
-    "experimentalTemplateCompilerOptions": {
-      "compatConfig": { "MODE": 2 } // optional
-    }
-  }
+  "extends": "./website/.nuxt/tsconfig.json"
 }

website/components/CardModule.vue

@@ -39,15 +39,15 @@
           <span>{{ mod.name }}</span>
           <UnoIcon
             v-if="mod.type === 'official'"
-            v-tooltip="{ content: 'Official',classes: tooltipClass }"
+            v-tooltip="'Official'"
             class="i-carbon-badge text-yellow-600 text-lg ml-1 my-auto opacity-85"
           />
         </h2>
         <div class="flex gap-2 py-3 w-full flex-wrap">
           <div
             v-for="{ tag, tagText, supportText, color, cssClass } of useModuleComptatibility(mod)"
             :key="tag"
-            v-tooltip="{ content: tagText + ': ' + supportText, classes: tooltipClass }"
+            v-tooltip="tagText + ': ' + supportText"
             :style="{ color: color, background: color + '20' }"
             :class="cssClass"
             class="flex min-w-12 relative items-center gap-1 text-base rounded-lg px-2 py-1 z-50"
@@ -105,7 +105,7 @@
         <a
           v-for="contributor of mod.contributors.slice(0, 5).reverse()"
           :key="contributor.login"
-          v-tooltip="{ content: contributor.name || contributor.login, classes: ['bg-secondary-dark', 'dark:bg-sky-black', 'text-white', 'px-2', 'py-1', 'rounded', 'text-sm', 'mb-2'] }"
+          v-tooltip="contributor.name || contributor.login"
           :aria-label="contributor.name || contributor.login"
           :href="`https://github.com/${contributor.login}`"
           target="_blank"
@@ -156,8 +156,6 @@ const useModuleComptatibility = (mod: ModuleInfo) => {
   }))
 }
 
-const tooltipClass = 'bg-secondary-dark text-white px-2 py-1 m-1 rounded text-sm shadow'
-
 function numberFormat (num: number, options = { precision: 1 }) {
   return numberFormatter(num, options)
 }

website/components/TheMain.vue

@@ -134,10 +134,10 @@
           class="grid gap-x-6 gap-y-8 mt-10"
           style="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"
         >
-          <template v-for="mod of pageFilteredModules">
-            <LazyHydrate :key="mod.name" when-visible>
-              <CardModule :mod="mod" />
-            </LazyHydrate>
+          <template v-for="mod of pageFilteredModules" :key="mod.name">
+            <!-- <LazyHydrate :key="mod.name" when-visible> -->
+            <CardModule :mod="mod" />
+            <!-- </LazyHydrate> -->
           </template>
           <Observer @intersect="intersectedModulesLoading" />
         </div>
@@ -150,7 +150,7 @@
 </template>
 
 <script setup lang="ts">
-import LazyHydrate from 'vue-lazy-hydration'
+// import LazyHydrate from 'vue-lazy-hydration'
 import Fuse from 'fuse.js/dist/fuse.basic.esm'
 import { breakpointsTailwind } from '@vueuse/core'
 import { CATEGORIES_ICONS, MODULE_INCREMENT_LOADING, VERSIONS } from '~/composables/constants'

website/components/TheOrderBy.vue

@@ -10,7 +10,7 @@
         <button
           type="button"
           :aria-label="`change sort`"
-          class="flex items-center justify-center w-full p-1 px-2 hover:bg-skborder-sky-lightest focus:bg-skborder-sky-lightest focus:outline-none hover:border-grey-light"
+          class="flex items-center justify-center w-full p-1 px-2 hover:bg-sky-lightest focus:bg-sky-lightest focus:outline-none hover:border-grey-light"
           @click="toggleOrderByMenu"
         >
           {{ currentOrderByLabel }}
@@ -42,7 +42,7 @@
         <button
           type="button"
           :aria-label="sortBy === 'asc' ? 'sort ascending' : 'sort descending'"
-          class="flex items-center p-2 hover:bg-skborder-sky-lightest focus:bg-skborder-sky-lightest focus:outline-none rounded-r-md"
+          class="flex items-center p-2 hover:bg-sky-lightest focus:bg-sky-lightest focus:outline-none rounded-r-md"
           @click="toggleSortBy"
         >
           <UnoIcon :class="sortBy === 'asc' ? 'i-carbon-sort-ascending' : 'i-carbon-sort-descending'" />

website/nuxt.config.ts

@@ -1,11 +1,11 @@
-import { defineNuxtConfig } from '@nuxt/bridge'
+import { defineNuxtConfig } from 'nuxt3'
 
 const title = 'Explore Nuxt Modules'
 const description = 'Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.'
 const url = 'https://modules.nuxtjs.org'
 
 export default defineNuxtConfig({
-  head: {
+  meta: {
     bodyAttrs: {
       class: 'min-h-screen'
     },
@@ -39,16 +39,11 @@ export default defineNuxtConfig({
     // https://pwa.nuxtjs.org
     '@nuxtjs/pwa',
     // https://github.com/moritzsternemann/vue-plausible
-    'vue-plausible',
+    // 'vue-plausible',
     // https://html-validator.nuxtjs.org
-    '@nuxtjs/html-validator',
+    // '@nuxtjs/html-validator',
     '@unocss/nuxt',
-    '@vueuse/nuxt',
-    '@nuxt/bridge'
-  ],
-  plugins: [
-    '~/plugins/unocss',
-    '~/plugins/v-tooltip.ts'
+    '@vueuse/nuxt'
   ],
   vueuse: {
     autoImports: true,
@@ -58,19 +53,13 @@ export default defineNuxtConfig({
     preflight: false,
     autoImport: false
   },
-  // @ts-expect-error PWA
   manifest: {
     name: 'Nuxt Modules',
     short_name: 'Nuxt Modules',
     description: 'Explore Nuxt Modules',
     theme_color: '#003c3c'
-  },
-  plausible: {
-    domain: 'modules.nuxtjs.org'
-  },
-  bridge: {
-    meta: true,
-    autoImports: true,
-    vite: true
   }
+  // plausible: {
+  //   domain: 'modules.nuxtjs.org'
+  // },
 })

website/package.json

@@ -14,21 +14,18 @@
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.0.14",
-    "@nuxt/bridge": "npm:@nuxt/bridge-edge@latest",
     "@nuxt/kit-edge": "npm:@nuxt/kit-edge@latest",
-    "@nuxtjs/google-fonts": "^1.3.0",
     "@nuxtjs/html-validator": "^0.6.0",
     "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/web-vitals": "^0.1.8",
+    "@types/seedrandom": "^3.0.1",
     "@unocss/nuxt": "^0.23.0",
-    "@vueuse/core": "^7.5.5",
     "@vueuse/nuxt": "^7.5.5",
+    "floating-vue": "^2.0.0-beta.5",
     "fuse.js": "^6.5.3",
     "millify": "^4.0.0",
-    "nuxt-edge": "latest",
+    "nuxt3": "^3.0.0-27398533.c82d353",
     "ohmyfetch": "^0.4.15",
-    "v-tooltip": "^2.1.3",
-    "vue-lazy-hydration": "^2.0.0-beta.4",
-    "vue-plausible": "^1.3.1"
+    "seedrandom": "^3.0.5"
   }
 }

website/pages/index.vue

@@ -2,14 +2,8 @@
   <TheMain :state="state" />
 </template>
 
-<script>
+<script setup lang="ts">
 import { fetchModules } from '~/composables/fetch'
 
-export default {
-  async asyncData () {
-    return {
-      state: await fetchModules()
-    }
-  }
-}
+const state = await fetchModules()
 </script>

website/plugins/floating-vue.ts

@@ -0,0 +1,7 @@
+import FloatingVue from 'floating-vue'
+import { defineNuxtPlugin } from '#app'
+import 'floating-vue/dist/style.css'
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  vueApp.use(FloatingVue)
+})

website/server/api/modules.ts

@@ -1,3 +1,4 @@
+import seedrandom from 'seedrandom'
 import { ModuleInfo } from '../../../lib/types'
 
 export default async () => {
@@ -8,10 +9,6 @@ export default async () => {
   }
 }
 
-function rand (min: number, max: number) {
-  return min + Math.round((Math.random() * (max - min)))
-}
-
 async function fetchModuleStats (module: ModuleInfo) {
   const ghRepo = module.repo.split('#')[0]
   if (process.env.NODE_ENV === 'production' || process.env.USE_NUXT_API) {
@@ -38,6 +35,12 @@ async function fetchModuleStats (module: ModuleInfo) {
     module.createdAt = +new Date(npm.createdAt || undefined)
     module.contributors = contributors
   } else {
+    const random = seedrandom('nuxt-modules')
+
+    function rand (min: number, max: number) {
+      return min + Math.round((random() * (max - min)))
+    }
+
     module.downloads = rand(0, 500)
     module.stars = rand(0, 2000)
     module.publishedAt = rand(1_600_000_000_000, 1_630_000_000_000)

website/unocss.config.ts

@@ -1,5 +1,5 @@
 import { UnocssNuxtOptions } from '@unocss/nuxt'
-import presetUno, { theme } from '@unocss/preset-uno'
+import presetUno from '@unocss/preset-uno'
 import presetAttributify from '@unocss/preset-attributify'
 import presetWebFonts from '@unocss/preset-web-fonts'
 import presetIcons from '@unocss/preset-icons'