Update Nuxt to v3.12.1 (#1720)

* Update Nuxt dependencies

* Fix ref access in ChartDisplay

* Fix feature flags cookie options type error

* Specify type-only imports

* Fix shorthands access to tags outside of reactive scope

* Replace most useRoute calls with useRoute from vue-router

Nuxt's version of this composable is horrendously broken (nuxt/nuxt#21340)

* Import all svgs with ?component parameter

Fixes weird hydration issues + gives correct type

components/ui/Badge.vue

@@ -35,19 +35,19 @@
 </template>
 
 <script setup>
-import ModrinthIcon from '~/assets/images/logo.svg'
-import ModeratorIcon from '~/assets/images/sidebar/admin.svg'
-import CreatorIcon from '~/assets/images/utils/box.svg'
-import ListIcon from '~/assets/images/utils/list.svg'
-import EyeOffIcon from '~/assets/images/utils/eye-off.svg'
-import DraftIcon from '~/assets/images/utils/file-text.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import ArchiveIcon from '~/assets/images/utils/archive.svg'
-import ProcessingIcon from '~/assets/images/utils/updated.svg'
-import CheckIcon from '~/assets/images/utils/check.svg'
-import LockIcon from '~/assets/images/utils/lock.svg'
-import CalendarIcon from '~/assets/images/utils/calendar.svg'
-import CloseIcon from '~/assets/images/utils/check-circle.svg'
+import ModrinthIcon from '~/assets/images/logo.svg?component'
+import ModeratorIcon from '~/assets/images/sidebar/admin.svg?component'
+import CreatorIcon from '~/assets/images/utils/box.svg?component'
+import ListIcon from '~/assets/images/utils/list.svg?component'
+import EyeOffIcon from '~/assets/images/utils/eye-off.svg?component'
+import DraftIcon from '~/assets/images/utils/file-text.svg?component'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import ArchiveIcon from '~/assets/images/utils/archive.svg?component'
+import ProcessingIcon from '~/assets/images/utils/updated.svg?component'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
+import LockIcon from '~/assets/images/utils/lock.svg?component'
+import CalendarIcon from '~/assets/images/utils/calendar.svg?component'
+import CloseIcon from '~/assets/images/utils/check-circle.svg?component'
 
 defineProps({
  type: {

components/ui/Breadcrumbs.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'
+import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?component'
 
 defineProps({
  linkStack: {

components/ui/Checkbox.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script>
-import CheckIcon from '~/assets/images/utils/check.svg'
-import DropdownIcon from '~/assets/images/utils/dropdown.svg'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
+import DropdownIcon from '~/assets/images/utils/dropdown.svg?component'
 
 export default {
  components: {

components/ui/Chips.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import CheckIcon from '~/assets/images/utils/check.svg'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
 
 export default {
  components: {

components/ui/CopyCode.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import CheckIcon from '~/assets/images/utils/check.svg'
-import ClipboardCopyIcon from '~/assets/images/utils/clipboard-copy.svg'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
+import ClipboardCopyIcon from '~/assets/images/utils/clipboard-copy.svg?component'
 
 export default {
  components: {

components/ui/EnvironmentIndicator.vue

@@ -48,10 +48,10 @@
  </span>
 </template>
 <script setup>
-import InfoIcon from '~/assets/images/utils/info.svg'
-import ClientIcon from '~/assets/images/utils/client.svg'
-import GlobeIcon from '~/assets/images/utils/globe.svg'
-import ServerIcon from '~/assets/images/utils/server.svg'
+import InfoIcon from '~/assets/images/utils/info.svg?component'
+import ClientIcon from '~/assets/images/utils/client.svg?component'
+import GlobeIcon from '~/assets/images/utils/globe.svg?component'
+import ServerIcon from '~/assets/images/utils/server.svg?component'
 
 defineProps({
  type: {

components/ui/Modal.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import CrossIcon from '~/assets/images/utils/x.svg'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
 
 export default {
  components: {

components/ui/ModalConfirm.vue

@@ -35,8 +35,8 @@
 
 <script>
 import { renderString } from 'omorphia'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import TrashIcon from '~/assets/images/utils/trash.svg'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import TrashIcon from '~/assets/images/utils/trash.svg?component'
 import Modal from '~/components/ui/Modal.vue'
 
 export default {

components/ui/ModalCreation.vue

@@ -74,8 +74,8 @@
 
 <script>
 import { Multiselect } from 'vue-multiselect'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import CheckIcon from '~/assets/images/utils/right-arrow.svg'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import CheckIcon from '~/assets/images/utils/right-arrow.svg?component'
 import Modal from '~/components/ui/Modal.vue'
 
 export default {

components/ui/NavStackItem.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'
+import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?component'
 
 export default {
  components: {

components/ui/NotificationItem.vue

@@ -289,15 +289,15 @@
 
 <script setup>
 import { renderString } from 'omorphia'
-import InvitationIcon from '~/assets/images/utils/user-plus.svg'
-import ModerationIcon from '~/assets/images/sidebar/admin.svg'
-import NotificationIcon from '~/assets/images/sidebar/notifications.svg'
-import ReadIcon from '~/assets/images/utils/check-circle.svg'
-import CalendarIcon from '~/assets/images/utils/calendar.svg'
-import VersionIcon from '~/assets/images/utils/version.svg'
-import CheckIcon from '~/assets/images/utils/check.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import ExternalIcon from '~/assets/images/utils/external.svg'
+import InvitationIcon from '~/assets/images/utils/user-plus.svg?component'
+import ModerationIcon from '~/assets/images/sidebar/admin.svg?component'
+import NotificationIcon from '~/assets/images/sidebar/notifications.svg?component'
+import ReadIcon from '~/assets/images/utils/check-circle.svg?component'
+import CalendarIcon from '~/assets/images/utils/calendar.svg?component'
+import VersionIcon from '~/assets/images/utils/version.svg?component'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import ExternalIcon from '~/assets/images/utils/external.svg?component'
 import ThreadSummary from '~/components/ui/thread/ThreadSummary.vue'
 import { getProjectLink, getVersionLink } from '~/helpers/projects.js'
 import { getUserLink } from '~/helpers/users.js'

components/ui/Pagination.vue

@@ -51,9 +51,9 @@
 </template>
 
 <script>
-import GapIcon from '~/assets/images/utils/gap.svg'
-import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg'
-import RightArrowIcon from '~/assets/images/utils/right-arrow.svg'
+import GapIcon from '~/assets/images/utils/gap.svg?component'
+import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg?component'
+import RightArrowIcon from '~/assets/images/utils/right-arrow.svg?component'
 
 export default {
  components: {

components/ui/ProjectCard.vue

@@ -94,10 +94,10 @@ import Categories from '~/components/ui/search/Categories.vue'
 import Badge from '~/components/ui/Badge.vue'
 import EnvironmentIndicator from '~/components/ui/EnvironmentIndicator.vue'
 
-import CalendarIcon from '~/assets/images/utils/calendar.svg'
-import EditIcon from '~/assets/images/utils/updated.svg'
-import DownloadIcon from '~/assets/images/utils/download.svg'
-import HeartIcon from '~/assets/images/utils/heart.svg'
+import CalendarIcon from '~/assets/images/utils/calendar.svg?component'
+import EditIcon from '~/assets/images/utils/updated.svg?component'
+import DownloadIcon from '~/assets/images/utils/download.svg?component'
+import HeartIcon from '~/assets/images/utils/heart.svg?component'
 import Avatar from '~/components/ui/Avatar.vue'
 
 export default {

components/ui/ProjectMemberHeader.vue

@@ -108,14 +108,14 @@
 <script setup>
 import { formatProjectType } from '~/plugins/shorthands.js'
 
-import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'
-import DropdownIcon from '~/assets/images/utils/dropdown.svg'
-import CheckIcon from '~/assets/images/utils/check.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import RequiredIcon from '~/assets/images/utils/asterisk.svg'
-import SuggestionIcon from '~/assets/images/utils/lightbulb.svg'
-import ModerationIcon from '~/assets/images/sidebar/admin.svg'
-import SendIcon from '~/assets/images/utils/send.svg'
+import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?component'
+import DropdownIcon from '~/assets/images/utils/dropdown.svg?component'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import RequiredIcon from '~/assets/images/utils/asterisk.svg?component'
+import SuggestionIcon from '~/assets/images/utils/lightbulb.svg?component'
+import ModerationIcon from '~/assets/images/sidebar/admin.svg?component'
+import SendIcon from '~/assets/images/utils/send.svg?component'
 import { acceptTeamInvite, removeTeamMember } from '~/helpers/teams.js'
 
 const props = defineProps({

components/ui/VersionFilterControl.vue

@@ -86,7 +86,7 @@
 <script setup>
 import { Multiselect } from 'vue-multiselect'
 import Checkbox from '~/components/ui/Checkbox.vue'
-import ClearIcon from '~/assets/images/utils/clear.svg'
+import ClearIcon from '~/assets/images/utils/clear.svg?component'
 
 const props = defineProps({
  versions: {
@@ -98,7 +98,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['switch-page'])
 
-const route = useRoute()
+const route = useNativeRoute()
 
 const tags = useTags()
 
@@ -131,7 +131,7 @@ const selectedVersionTypes = shallowRef(getArrayOrString(route.query.c) ?? [])
 
 async function updateQuery() {
  const router = useRouter()
- const route = useRoute()
+ const route = useNativeRoute()
 
  await router.replace({
  query: {

components/ui/charts/ChartDisplay.vue

@@ -160,7 +160,7 @@
  <div
  :style="{
  '--color-brand': isUsingProjectColors
- ? intToRgba(project.color, project.id, theme.value ?? undefined)
+ ? intToRgba(project.color, project.id, theme ?? undefined)
  : getDefaultColor(project.id),
  }"
  class="legend__item__color"
@@ -306,7 +306,7 @@ import { analyticsSetToCSVString, intToRgba } from '~/utils/analytics.js'
 
 import { UiChartsCompactChart as CompactChart, UiChartsChart as Chart } from '#components'
 
-import PaletteIcon from '~/assets/icons/palette.svg'
+import PaletteIcon from '~/assets/icons/palette.svg?component'
 
 const router = useRouter()
 const theme = useTheme()

components/ui/report/ReportInfo.vue

@@ -91,9 +91,9 @@
 import { renderHighlightedString } from '~/helpers/highlight.js'
 import Avatar from '~/components/ui/Avatar.vue'
 import Badge from '~/components/ui/Badge.vue'
-import ReportIcon from '~/assets/images/utils/report.svg'
-import UnknownIcon from '~/assets/images/utils/unknown.svg'
-import VersionIcon from '~/assets/images/utils/version.svg'
+import ReportIcon from '~/assets/images/utils/report.svg?component'
+import UnknownIcon from '~/assets/images/utils/unknown.svg?component'
+import VersionIcon from '~/assets/images/utils/version.svg?component'
 import ThreadSummary from '~/components/ui/thread/ThreadSummary.vue'
 import CopyCode from '~/components/ui/CopyCode.vue'
 

components/ui/thread/ConversationThread.vue

@@ -199,13 +199,13 @@
 import { OverflowMenu, MarkdownEditor, DropdownIcon } from 'omorphia'
 import { useImageUpload } from '~/composables/image-upload.ts'
 import CopyCode from '~/components/ui/CopyCode.vue'
-import ReplyIcon from '~/assets/images/utils/reply.svg'
-import SendIcon from '~/assets/images/utils/send.svg'
-import CloseIcon from '~/assets/images/utils/check-circle.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import EyeOffIcon from '~/assets/images/utils/eye-off.svg'
-import CheckIcon from '~/assets/images/utils/check.svg'
-import ModerationIcon from '~/assets/images/sidebar/admin.svg'
+import ReplyIcon from '~/assets/images/utils/reply.svg?component'
+import SendIcon from '~/assets/images/utils/send.svg?component'
+import CloseIcon from '~/assets/images/utils/check-circle.svg?component'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import EyeOffIcon from '~/assets/images/utils/eye-off.svg?component'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
+import ModerationIcon from '~/assets/images/sidebar/admin.svg?component'
 import ThreadMessage from '~/components/ui/thread/ThreadMessage.vue'
 import { isStaff } from '~/helpers/users.js'
 import { isApproved, isRejected } from '~/helpers/projects.js'

components/ui/thread/ThreadSummary.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'
+import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?component'
 import ThreadMessage from '~/components/ui/thread/ThreadMessage.vue'
 
 const props = defineProps({

composables/auth.js

@@ -94,7 +94,7 @@ export const initAuth = async (oldToken = null) => {
 
 export const getAuthUrl = (provider, redirect = '') => {
  const config = useRuntimeConfig()
- const route = useRoute()
+ const route = useNativeRoute()
 
  if (redirect === '') {
  redirect = route.path

composables/compact-number.ts

@@ -1,5 +1,5 @@
 import { createFormatter, type Formatter } from '@vintl/compact-number'
-import { IntlController } from '@vintl/vintl/controller'
+import type { IntlController } from '@vintl/vintl/controller'
 
 const formatters = new WeakMap<IntlController<any>, Formatter>()
 

composables/featureFlags.ts

@@ -1,4 +1,4 @@
-import { CookieOptions } from '#app'
+import type { CookieOptions } from '#app'
 
 export type ProjectDisplayMode = 'list' | 'grid' | 'gallery'
 export type DarkColorTheme = 'dark' | 'oled' | 'retro'
@@ -58,13 +58,13 @@ export type AllFeatureFlags = {
 
 export type PartialFeatureFlags = Partial<AllFeatureFlags>
 
-const COOKIE_OPTIONS: CookieOptions<PartialFeatureFlags> = {
+const COOKIE_OPTIONS = {
  maxAge: 60 * 60 * 24 * 365 * 10,
  sameSite: 'lax',
  secure: true,
  httpOnly: false,
  path: '/',
-}
+} satisfies CookieOptions<PartialFeatureFlags>
 
 export const useFeatureFlags = () =>
  useState<AllFeatureFlags>('featureFlags', () => {

composables/how-ago.ts

@@ -1,5 +1,5 @@
 import { createFormatter, type Formatter } from '@vintl/how-ago'
-import { IntlController } from '@vintl/vintl/controller'
+import type { IntlController } from '@vintl/vintl/controller'
 
 const formatters = new WeakMap<IntlController<any>, Formatter>()
 

composables/nuxt-bugfest.ts

@@ -0,0 +1 @@
+export { useRoute as useNativeRoute } from 'vue-router'

composables/route-params.js

@@ -5,6 +5,6 @@
  * @returns {import('vue').Ref<string | string[] | undefined>}
  */
 export const useRouteId = (key = 'id') => {
- const route = useRoute()
+ const route = useNativeRoute()
  return route.params?.[key] || undefined
 }

layouts/default.vue

@@ -428,21 +428,21 @@ import {
  Button,
  ReportIcon,
 } from 'omorphia'
-import HamburgerIcon from '~/assets/images/utils/hamburger.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import SearchIcon from '~/assets/images/utils/search.svg'
-
-import NotificationIcon from '~/assets/images/sidebar/notifications.svg'
-import SettingsIcon from '~/assets/images/sidebar/settings.svg'
-import ModerationIcon from '~/assets/images/sidebar/admin.svg'
-import HomeIcon from '~/assets/images/sidebar/home.svg'
-
-import MoonIcon from '~/assets/images/utils/moon.svg'
-import SunIcon from '~/assets/images/utils/sun.svg'
-import PlusIcon from '~/assets/images/utils/plus.svg'
-import DropdownIcon from '~/assets/images/utils/dropdown.svg'
-import LogOutIcon from '~/assets/images/utils/log-out.svg'
-import ChartIcon from '~/assets/images/utils/chart.svg'
+import HamburgerIcon from '~/assets/images/utils/hamburger.svg?component'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import SearchIcon from '~/assets/images/utils/search.svg?component'
+
+import NotificationIcon from '~/assets/images/sidebar/notifications.svg?component'
+import SettingsIcon from '~/assets/images/sidebar/settings.svg?component'
+import ModerationIcon from '~/assets/images/sidebar/admin.svg?component'
+import HomeIcon from '~/assets/images/sidebar/home.svg?component'
+
+import MoonIcon from '~/assets/images/utils/moon.svg?component'
+import SunIcon from '~/assets/images/utils/sun.svg?component'
+import PlusIcon from '~/assets/images/utils/plus.svg?component'
+import DropdownIcon from '~/assets/images/utils/dropdown.svg?component'
+import LogOutIcon from '~/assets/images/utils/log-out.svg?component'
+import ChartIcon from '~/assets/images/utils/chart.svg?component'
 
 import NavRow from '~/components/ui/NavRow.vue'
 import ModalCreation from '~/components/ui/ModalCreation.vue'
@@ -460,7 +460,7 @@ const flags = useFeatureFlags()
 const tags = useTags()
 
 const config = useRuntimeConfig()
-const route = useRoute()
+const route = useNativeRoute()
 const link = config.public.siteUrl + route.path.replace(/\/+$/, '')
 
 const verifyEmailBannerMessages = defineMessages({