chore: update nuxt to v3.9.3 and vue 3.4.15

components/account/AccountHoverWrapper.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   disabled?: boolean
 }>()
 
-const account = computed(() => props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined))
+const account = computed(() => props.account || (props.handle ? useAccountByHandle(props.handle!)?.value : undefined))
 const userSettings = useUserSettings()
 </script>
 

components/account/AccountTabs.vue

@@ -4,15 +4,15 @@ import type { CommonRouteTabOption } from '../common/CommonRouteTabs.vue'
 const { t } = useI18n()
 const route = useRoute()
 
-const server = $(computedEager(() => route.params.server as string))
-const account = $(computedEager(() => route.params.account as string))
+const server = computed(() => route.params.server as string)
+const account = computed(() => route.params.account as string)
 
-const tabs = $computed<CommonRouteTabOption[]>(() => [
+const tabs = computed<CommonRouteTabOption[]>(() => [
   {
     name: 'account-index',
     to: {
       name: 'account-index',
-      params: { server, account },
+      params: { server: server.value, account: account.value },
     },
     display: t('tab.posts'),
     icon: 'i-ri:file-list-2-line',
@@ -21,7 +21,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
     name: 'account-replies',
     to: {
       name: 'account-replies',
-      params: { server, account },
+      params: { server: server.value, account: account.value },
     },
     display: t('tab.posts_with_replies'),
     icon: 'i-ri:chat-1-line',
@@ -30,7 +30,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
     name: 'account-media',
     to: {
       name: 'account-media',
-      params: { server, account },
+      params: { server: server.value, account: account.value },
     },
     display: t('tab.media'),
     icon: 'i-ri:camera-2-line',

components/common/CommonPaginator.vue

@@ -94,8 +94,8 @@ defineExpose({ createEntry, removeEntry, updateEntry })
       </template>
       <template v-else>
         <slot
-          v-for="item, index of items"
-          v-bind="{ key: item[keyProp as keyof U] }"
+          v-for="(item, index) of items"
+          v-bind="{ key: (item as U)[keyProp as keyof U] }"
           :item="item as U"
           :older="items[index + 1] as U"
           :newer="items[index - 1] as U"

components/common/CommonRouteTabs.vue

@@ -60,9 +60,9 @@ useCommands(() => command
         <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
       </div>
     </template>
-    <template v-if="moreOptions?.options?.length">
+    <template v-if="isHydrated && moreOptions?.options?.length">
       <CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
-        <CommonTooltip placement="top" :content="moreOptions.tooltip || t('action.more')">
+        <CommonTooltip placement="top" :content="isHydrated ? (moreOptions.tooltip || t('action.more')) : ''">
           <button
             cursor-pointer
             flex
@@ -74,7 +74,7 @@ useCommands(() => command
             op75
             px4
             group
-            :aria-label="t('action.more')"
+            :aria-label="isHydrated ? t('action.more') : ''"
             :class="moreOptions.match ? 'text-primary' : 'text-secondary'"
           >
             <span v-if="moreOptions.icon" :class="moreOptions.icon" text-sm me--1 block />
@@ -91,7 +91,7 @@ useCommands(() => command
               <span flex="~ row" gap-x-4 items-center :class="option.match ? 'text-primary' : ''">
                 <span v-if="option.icon" :class="[option.icon, option.match ? 'text-primary' : 'text.secondary']" text-md me--1 block />
                 <span v-else block>&#160;</span>
-                <span>{{ option.display }}</span>
+                <span>{{ isHydrated ? option.display : '' }}</span>
               </span>
             </CommonDropdownItem>
           </NuxtLink>

components/common/CommonTooltip.vue

@@ -10,6 +10,7 @@ defineProps<Props>()
 
 <template>
   <VTooltip
+    v-if="isHydrated"
     v-bind="$attrs"
     auto-hide
   >

components/common/dropdown/DropdownItem.vue

@@ -50,20 +50,20 @@ useCommand({
     flex gap-3 items-center cursor-pointer px4 py3
     select-none
     hover-bg-active
-    :aria-label="text"
+    :aria-label="isHydrated ? text : ''"
     @click="handleClick"
   >
     <div v-if="icon" :class="icon" />
     <div flex="~ col">
       <div text-15px>
         <slot>
-          {{ text }}
+          {{ isHydrated ? text : '' }}
         </slot>
       </div>
       <div text-3 text-secondary>
         <slot name="description">
           <p v-if="description">
-            {{ description }}
+            {{ isHydrated ? description : '' }}
           </p>
         </slot>
       </div>

components/search/SearchWidget.vue

@@ -4,6 +4,7 @@ const { accounts, hashtags, loading, statuses } = useSearch(query)
 const index = ref(0)
 
 const { t } = useI18n()
+
 const el = ref<HTMLElement>()
 const input = ref<HTMLInputElement>()
 const router = useRouter()

components/settings/SettingsItem.vue

@@ -46,7 +46,7 @@ useCommand({
     @click="to ? $scrollToTop() : undefined"
   >
     <div
-      w-full flex w-fit px5 py3 md:gap2 gap4 items-center
+      w-full flex px5 py3 md:gap2 gap4 items-center
       transition-250 group-hover:bg-active
       group-focus-visible:ring="2 current"
     >

composables/idb/index.ts

@@ -21,7 +21,7 @@ export async function useAsyncIDBKeyval<T>(
 
   const data = (shallow ? shallowRef : ref)(initialValue) as Ref<T>
 
-  const rawInit: T = resolveUnref(initialValue)
+  const rawInit: T = toValue(initialValue)
 
   async function read() {
     if (!isIDBSupported)

composables/paginator.ts

@@ -126,6 +126,7 @@ export function usePaginator<T, P, U = T>(
         )
           loadNext()
       },
+      // { immediate: true, flush: 'post' },
     )
   }
 

composables/settings/storage.ts

@@ -1,14 +1,12 @@
 import type { Ref } from 'vue'
-import type { VueI18n } from 'vue-i18n'
 import type { LocaleObject } from 'vue-i18n-routing'
 import type { FontSize, OldFontSize, PreferencesSettings, UserSettings } from './definition'
 import { STORAGE_KEY_SETTINGS } from '~/constants'
 import { oldFontSizeMap } from '~~/constants/options'
 
 export function useUserSettings() {
-  const i18n = useNuxtApp().vueApp.config.globalProperties.$i18n as VueI18n
-  const { locales } = i18n
-  const supportLanguages = (locales as LocaleObject[]).map(locale => locale.code)
+  const { locales } = useNuxtApp().$i18n
+  const supportLanguages = (unref(locales) as LocaleObject[]).map(locale => locale.code)
   const settingsStorage = useUserLocalStorage<UserSettings>(STORAGE_KEY_SETTINGS, () => getDefaultUserSettings(supportLanguages))
 
   // Backward compatibility, font size was xs, sm, md, lg, xl before

composables/tiptap/shikiji-parser.ts

@@ -1,13 +1,13 @@
 import { type Parser, createParser } from 'prosemirror-highlight/shikiji'
-import type { BuiltinLanguage } from 'shikiji/langs'
+import type { BundledLanguage } from 'shikiji/langs'
 
 let parser: Parser | undefined
 
 export const shikijiParser: Parser = (options) => {
   const lang = options.language ?? 'text'
 
   // Register the language if it's not yet registered
-  const { highlighter, promise } = useHighlighter(lang as BuiltinLanguage)
+  const { highlighter, promise } = useHighlighter(lang as BundledLanguage)
 
   // If the highlighter or the language is not available, return a promise that
   // will resolve when it's ready. When the promise resolves, the editor will

composables/users.ts

@@ -184,15 +184,15 @@ export function getExpandSpoilersByDefault(account: mastodon.v1.AccountCredentia
  * @returns `true` when user selected "Always show media" as Media Display preference
  */
 export function getExpandMediaByDefault(account: mastodon.v1.AccountCredentials) {
-  return accountPreferencesMap.get(account.acct)?.['reading:expand:media'] === 'show_all' ?? false
+  return accountPreferencesMap.get(account.acct)?.['reading:expand:media'] === 'show_all'
 }
 
 /**
  * @param account
  * @returns `true` when user selected "Always hide media" as Media Display preference
  */
 export function getHideMediaByDefault(account: mastodon.v1.AccountCredentials) {
-  return accountPreferencesMap.get(account.acct)?.['reading:expand:media'] === 'hide_all' ?? false
+  return (accountPreferencesMap.get(account.acct)?.['reading:expand:media'] === 'hide_all')
 }
 
 export async function fetchAccountInfo(client: mastodon.rest.Client, server: string) {
@@ -362,20 +362,20 @@ export function useUserLocalStorage<T extends object>(key: string, initial: () =
         // Backward compatibility, respect webDomain in acct
         // In previous versions, acct was username@server instead of username@webDomain
         // for example: elk@m.webtoo.ls instead of elk@webtoo.ls
-        // if (!all.value[id]) { // TODO: add back this condition in the future
-        const [username, webDomain] = id.split('@')
-        const server = currentServer.value
-        if (webDomain && server && server !== webDomain) {
-          const oldId = `${username}@${server}`
-          const outdatedSettings = all.value[oldId]
-          if (outdatedSettings) {
-            const newAllValue = { ...all.value, [id]: outdatedSettings }
-            delete newAllValue[oldId]
-            all.value = newAllValue
+        if (!all.value[id]) {
+          const [username, webDomain] = id.split('@')
+          const server = currentServer.value
+          if (webDomain && server && server !== webDomain) {
+            const oldId = `${username}@${server}`
+            const outdatedSettings = all.value[oldId]
+            if (outdatedSettings) {
+              const newAllValue = { ...all.value, [id]: outdatedSettings }
+              delete newAllValue[oldId]
+              all.value = newAllValue
+            }
           }
+          all.value[id] = Object.assign(initial(), all.value[id] || {})
         }
-        // }
-        all.value[id] = Object.assign(initial(), all.value[id] || {})
         return all.value[id]
       })
     })

composables/vue.ts

@@ -6,7 +6,10 @@ import type { SchemaAugmentations } from '@unhead/schema'
 export const isHydrated = ref(false)
 
 export function onHydrated(cb: () => unknown) {
-  watchOnce(isHydrated, () => cb(), { immediate: isHydrated.value })
+  if (isHydrated.value)
+    watchOnce(isHydrated, () => cb(), { immediate: true })
+  else
+    watchOnce(isHydrated, () => cb())
 }
 
 /**

config/i18n.config.ts

@@ -0,0 +1,20 @@
+import {
+  currentLocales,
+  datetimeFormats,
+  numberFormats,
+  pluralRules,
+} from './i18n'
+
+export default defineI18nConfig(() => {
+  return {
+    legacy: false,
+    availableLocales: currentLocales.map(l => l.code),
+    fallbackLocale: 'en-US',
+    fallbackWarn: true,
+    missingWarn: true,
+    datetimeFormats,
+    numberFormats,
+    // eslint-disable-next-line @typescript-eslint/comma-dangle
+    pluralRules
+  }
+})

config/i18n.ts

@@ -1,4 +1,3 @@
-import type { NuxtI18nOptions } from '@nuxtjs/i18n'
 import type { DateTimeFormats, NumberFormats, PluralizationRule, PluralizationRules } from '@intlify/core-base'
 
 import type { LocaleObject } from '#i18n'
@@ -256,7 +255,7 @@ function buildLocales() {
 
 export const currentLocales = buildLocales()
 
-const datetimeFormats = Object.values(currentLocales).reduce((acc, data) => {
+export const datetimeFormats = Object.values(currentLocales).reduce((acc, data) => {
   const dateTimeFormats = data.dateTimeFormats
   if (dateTimeFormats) {
     acc[data.code] = { ...dateTimeFormats }
@@ -281,7 +280,7 @@ const datetimeFormats = Object.values(currentLocales).reduce((acc, data) => {
   return acc
 }, <DateTimeFormats>{})
 
-const numberFormats = Object.values(currentLocales).reduce((acc, data) => {
+export const numberFormats = Object.values(currentLocales).reduce((acc, data) => {
   const numberFormats = data.numberFormats
   if (numberFormats) {
     acc[data.code] = { ...numberFormats }
@@ -313,7 +312,7 @@ const numberFormats = Object.values(currentLocales).reduce((acc, data) => {
   return acc
 }, <NumberFormats>{})
 
-const pluralRules = Object.values(currentLocales).reduce((acc, data) => {
+export const pluralRules = Object.values(currentLocales).reduce((acc, data) => {
   const pluralRule = data.pluralRule
   if (pluralRule) {
     acc[data.code] = pluralRule
@@ -322,21 +321,3 @@ const pluralRules = Object.values(currentLocales).reduce((acc, data) => {
 
   return acc
 }, <PluralizationRules>{})
-
-export const i18n: NuxtI18nOptions = {
-  locales: currentLocales,
-  lazy: true,
-  strategy: 'no_prefix',
-  detectBrowserLanguage: false,
-  langDir: 'locales',
-  defaultLocale: 'en-US',
-  vueI18n: {
-    availableLocales: currentLocales.map(l => l.code),
-    fallbackLocale: 'en-US',
-    fallbackWarn: false,
-    missingWarn: false,
-    datetimeFormats,
-    numberFormats,
-    pluralRules,
-  },
-}

docs/package.json

@@ -9,10 +9,10 @@
     "preview": "nuxi preview"
   },
   "dependencies": {
-    "theme-colors": "^0.0.5"
+    "theme-colors": "^0.1.0"
   },
   "devDependencies": {
-    "@nuxt-themes/docus": "^1.14.6",
-    "nuxt": "^3.7.0"
+    "@nuxt-themes/docus": "^1.15.0",
+    "nuxt": "3.9.3"
   }
 }

emoji-mart-traslation.d.ts

@@ -1,3 +1,3 @@
 declare module 'virtual:emoji-mart-lang-importer' {
-    export default function(lang: string): Promise<any>
+  export default function (lang: string): Promise<any>
 }

modules/emoji-mart-translation.ts

@@ -1,7 +1,6 @@
 import fs from 'fs-extra'
 import { createResolver, defineNuxtModule } from '@nuxt/kit'
-import { i18n } from '../config/i18n'
-import type { LocaleObject } from '#i18n'
+import { currentLocales } from '../config/i18n'
 
 const virtual = 'virtual:emoji-mart-lang-importer'
 const resolvedVirtual = `\0${virtual}.mjs`
@@ -25,7 +24,7 @@ export default defineNuxtModule({
           if (id === resolvedVirtual) {
             const locales = await Promise.all(
               Array
-                .from(new Set((i18n.locales as LocaleObject[]).map(l => l.code.split('-')[0])))
+                .from(new Set((currentLocales).map(l => l.code.split('-')[0])))
                 .map(async (l) => {
                   const exists = await isFile(resolver.resolve(`../node_modules/@emoji-mart/data/i18n/${l}.json`))
                   return [l, exists] as [code: string, exists: boolean]

modules/pwa/i18n.ts

@@ -3,12 +3,11 @@ import { readFile } from 'fs-extra'
 import { createResolver } from '@nuxt/kit'
 import type { ManifestOptions } from 'vite-plugin-pwa'
 import { getEnv } from '../../config/env'
-import { i18n } from '../../config/i18n'
-import type { LocaleObject } from '#i18n'
+import { currentLocales } from '../../config/i18n'
 
 export type LocalizedWebManifest = Record<string, Partial<ManifestOptions>>
 
-export const pwaLocales = i18n.locales as LocaleObject[]
+export const pwaLocales = currentLocales
 
 type WebManifestEntry = Pick<ManifestOptions, 'name' | 'short_name' | 'description' | 'screenshots' | 'shortcuts'>
 type RequiredWebManifestEntry = Required<WebManifestEntry & Pick<ManifestOptions, 'dir' | 'lang' | 'screenshots' | 'shortcuts'>>

modules/pwa/index.ts

@@ -58,10 +58,8 @@ export default defineNuxtModule<VitePWANuxtOptions>({
       references.push({ types: 'vite-plugin-pwa/info' })
       references.push({ types: 'vite-plugin-pwa/vue' })
     })
-    if (!options.disable) {
-      // Inject $pwa helper throughout app
-      addPlugin({ src: resolver.resolve('./runtime/pwa-plugin.client') })
-    }
+    // Inject $pwa helper throughout app: vue complaining about missing $pwa in pwa badges
+    addPlugin({ src: resolver.resolve(options.disable ? './runtime/pwa-plugin-stub.client' : './runtime/pwa-plugin.client') })
 
     // TODO: combine with configurePWAOptions?
     nuxt.hook('nitro:init', (nitro) => {

modules/pwa/runtime/pwa-plugin-stub.client.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      pwa: {},
+    },
+  }
+})