chore: update to nuxt 3.20

apps/app-frontend/package.json

@@ -29,18 +29,18 @@
 		"@tauri-apps/plugin-window-state": "^2.2.2",
 		"@types/three": "^0.172.0",
 		"intl-messageformat": "^10.7.7",
-		"vue-i18n": "^9.14.0",
+		"vue-i18n": "^10.0.0",
 		"@vueuse/core": "^11.1.0",
 		"dayjs": "^1.11.10",
 		"floating-vue": "^5.2.2",
 		"ofetch": "^1.3.4",
-		"pinia": "^2.1.7",
+		"pinia": "^3.0.0",
 		"posthog-js": "^1.158.2",
 		"three": "^0.172.0",
 		"vite-svg-loader": "^5.1.0",
 		"vue": "^3.5.13",
 		"vue-multiselect": "3.0.0",
-		"vue-router": "4.3.0",
+		"vue-router": "^4.6.0",
 		"vue-virtual-scroller": "v2.0.0-beta.8"
 	},
 	"devDependencies": {
@@ -49,7 +49,7 @@
 		"@modrinth/tooling-config": "workspace:*",
 		"@nuxt/eslint-config": "^0.5.6",
 		"@taijased/vue-render-tracker": "^1.0.7",
-		"@vitejs/plugin-vue": "^5.0.4",
+		"@vitejs/plugin-vue": "^6.0.3",
 		"autoprefixer": "^10.4.19",
 		"eslint": "^9.9.1",
 		"eslint-plugin-turbo": "^2.5.4",
@@ -58,7 +58,7 @@
 		"sass": "^1.74.1",
 		"tailwindcss": "^3.4.4",
 		"typescript": "^5.5.4",
-		"vite": "^5.4.6",
+		"vite": "^6.0.0",
 		"vue-component-type-helpers": "^3.1.8",
 		"vue-tsc": "^2.1.6"
 	},

apps/app-frontend/src/components/ui/InstanceCreationModal.vue

@@ -341,7 +341,7 @@ const create_instance = async () => {
 	creating.value = true
 	const loader_version_value =
 		loader_version.value === 'other' ? specified_loader_version.value : loader_version.value
-	const loaderVersion = loader.value === 'vanilla' ? null : loader_version_value ?? 'stable'
+	const loaderVersion = loader.value === 'vanilla' ? null : (loader_version_value ?? 'stable')
 
 	hide()
 	creating.value = false
@@ -350,7 +350,7 @@ const create_instance = async () => {
 		profile_name.value,
 		game_version.value,
 		loader.value,
-		loader.value === 'vanilla' ? null : loader_version_value ?? 'stable',
+		loader.value === 'vanilla' ? null : (loader_version_value ?? 'stable'),
 		icon.value,
 	).catch(handleError)
 

apps/app-frontend/src/components/ui/ProjectCard.vue

@@ -63,7 +63,7 @@ const toTransparent = computed(() => {
 		<div
 			class="w-full aspect-[2/1] bg-cover bg-center bg-no-repeat"
 			:style="{
-				'background-color': project.featured_gallery ?? project.gallery[0] ? null : toColor,
+				'background-color': (project.featured_gallery ?? project.gallery[0]) ? null : toColor,
 				'background-image': `url(${
 					project.featured_gallery ??
 					project.gallery[0] ??

apps/app-frontend/src/components/ui/SplashScreen.vue

@@ -191,7 +191,8 @@ const handleClose = async () => {
 	position: absolute;
 	height: 100vh;
 	width: 100vw;
-	background: linear-gradient(180deg, rgba(66, 131, 92, 0.275) 0%, rgba(17, 35, 43, 0.5) 97.29%),
+	background:
+		linear-gradient(180deg, rgba(66, 131, 92, 0.275) 0%, rgba(17, 35, 43, 0.5) 97.29%),
 		linear-gradient(0deg, rgba(22, 24, 28, 0.64), rgba(22, 24, 28, 0.64));
 	z-index: 9997;
 }

apps/app-frontend/src/components/ui/world/WorldItem.vue

@@ -189,7 +189,9 @@ const messages = defineMessages({
 		>
 			<Avatar
 				:src="
-					world.type === 'server' && serverStatus ? serverStatus.favicon ?? world.icon : world.icon
+					world.type === 'server' && serverStatus
+						? (serverStatus.favicon ?? world.icon)
+						: world.icon
 				"
 				size="48px"
 			/>

apps/app-frontend/vite.config.ts

@@ -9,6 +9,14 @@ const projectRootDir = resolve(__dirname)
 
 // https://vitejs.dev/config/
 export default defineConfig({
+	css: {
+		preprocessorOptions: {
+			scss: {
+				// TODO: dont forget about this
+				silenceDeprecations: ['import'],
+			},
+		},
+	},
 	resolve: {
 		alias: [
 			{

apps/frontend/src/i18n.config.ts → apps/frontend/i18n/i18n.config.ts

@@ -1,8 +1,11 @@
 import { buildLocaleMessages, createMessageCompiler, type CrowdinMessages } from '@modrinth/ui'
 
-const localeModules = import.meta.glob<{ default: CrowdinMessages }>('./locales/*/index.json', {
-	eager: true,
-})
+const localeModules = import.meta.glob<{ default: CrowdinMessages }>(
+	'../src/locales/*/index.json',
+	{
+		eager: true,
+	},
+)
 
 export default defineI18nConfig(() => ({
 	legacy: false,
@@ -11,5 +14,6 @@ export default defineI18nConfig(() => ({
 	messageCompiler: createMessageCompiler(),
 	missingWarn: false,
 	fallbackWarn: false,
+	// @ts-expect-error - buildLocaleMessages returns compatible format at runtime
 	messages: buildLocaleMessages(localeModules),
 }))

apps/frontend/nuxt.config.ts

@@ -56,6 +56,18 @@ export default defineNuxtConfig({
 		},
 	},
 	vite: {
+		css: {
+			preprocessorOptions: {
+				scss: {
+					// TODO: dont forget about this
+					silenceDeprecations: ['import'],
+				},
+			},
+		},
+		ssr: {
+			// https://github.com/Akryum/floating-vue/issues/809#issuecomment-1002996240
+			noExternal: ['v-tooltip'],
+		},
 		define: {
 			global: {},
 		},
@@ -196,21 +208,39 @@ export default defineNuxtConfig({
 			},
 		},
 	},
-	modules: ['@nuxtjs/i18n', '@pinia/nuxt'],
+	modules: ['@nuxtjs/i18n', '@pinia/nuxt', 'floating-vue/nuxt'],
+	floatingVue: {
+		themes: {
+			'ribbit-popout': {
+				$extend: 'dropdown',
+				placement: 'bottom-end',
+				instantMove: true,
+				distance: 8,
+			},
+			'dismissable-prompt': {
+				$extend: 'dropdown',
+				placement: 'bottom-start',
+			},
+		},
+	},
 	i18n: {
 		defaultLocale: 'en-US',
+		// @ts-expect-error - LocaleDefinition is compatible at runtime
 		locales: LOCALES,
 		strategy: 'no_prefix',
 		detectBrowserLanguage: {
 			useCookie: true,
 			cookieKey: 'locale',
 			fallbackLocale: 'en-US',
 		},
-		vueI18n: './src/i18n.config.ts',
+		vueI18n: './i18n.config.ts',
+		bundle: {
+			optimizeTranslationDirective: false,
+		},
 	},
 	nitro: {
 		rollupConfig: {
-			// @ts-expect-error it's not infinite.
+			// @ts-expect-error because of rolldown-vite - completely fine though
 			plugins: [serverSidedVue()],
 		},
 	},
@@ -255,7 +285,7 @@ export default defineNuxtConfig({
 			},
 		},
 	},
-	compatibilityDate: '2024-07-03',
+	compatibilityDate: '2025-01-01',
 	telemetry: false,
 })
 

apps/frontend/package.json

@@ -10,20 +10,19 @@
 		"postinstall": "nuxi prepare",
 		"lint": "eslint . && prettier --check .",
 		"fix": "eslint . --fix && prettier --write .",
-		"intl:extract": "formatjs extract \"{,src/components,src/composables,src/layouts,src/middleware,src/modules,src/pages,src/plugins,src/utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" \"src/error.vue\" --ignore \"**/*.d.ts\" --ignore node_modules --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
+		"intl:extract": "formatjs extract \"src/{components,composables,layouts,middleware,modules,pages,plugins,utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" \"src/error.vue\" --ignore \"**/*.d.ts\" --ignore node_modules --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
 		"test": "nuxi build"
 	},
 	"devDependencies": {
 		"@formatjs/cli": "^6.2.12",
-		"@nuxt/devtools": "^1.3.3",
-		"@nuxtjs/i18n": "^8.5.5",
+		"@modrinth/tooling-config": "workspace:*",
+		"@nuxtjs/i18n": "^9.0.0",
 		"@types/dompurify": "^3.0.5",
 		"@types/iso-3166-2": "^1.0.4",
 		"@types/node": "^20.1.0",
 		"autoprefixer": "^10.4.19",
-		"eslint": "^8.57.0",
 		"glob": "^10.2.7",
-		"nuxt": "^3.14.1592",
+		"nuxt": "^3.20.2",
 		"postcss": "^8.4.39",
 		"prettier-plugin-tailwindcss": "^0.6.5",
 		"sass": "^1.58.0",
@@ -43,11 +42,10 @@
 		"@modrinth/moderation": "workspace:*",
 		"@modrinth/ui": "workspace:*",
 		"@modrinth/utils": "workspace:*",
-		"@pinia/nuxt": "^0.5.1",
+		"@pinia/nuxt": "^0.11.3",
 		"@tanstack/vue-query": "^5.90.7",
 		"@types/three": "^0.172.0",
-		"intl-messageformat": "^10.7.7",
-		"@vitejs/plugin-vue": "^5.0.4",
+		"@vitejs/plugin-vue": "^6.0.3",
 		"@vue-email/components": "^0.0.21",
 		"@vue-email/render": "^0.0.9",
 		"@vueuse/core": "^11.1.0",
@@ -58,12 +56,13 @@
 		"floating-vue": "^5.2.2",
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.7.0",
+		"intl-messageformat": "^10.7.7",
 		"iso-3166-2": "1.0.0",
 		"js-yaml": "^4.1.0",
 		"jszip": "^3.10.1",
 		"markdown-it": "14.1.0",
 		"pathe": "^1.1.2",
-		"pinia": "^2.1.7",
+		"pinia": "^3.0.0",
 		"pinia-plugin-persistedstate": "^4.4.1",
 		"prettier": "^3.6.2",
 		"qrcode.vue": "^3.4.0",

apps/frontend/src/app.vue

@@ -1,5 +1,6 @@
 <template>
 	<NuxtLayout>
+		<NuxtRouteAnnouncer />
 		<ModrinthLoadingIndicator />
 		<NotificationPanel />
 		<NuxtPage />

package.json

@@ -35,6 +35,15 @@
 	"pnpm": {
 		"patchedDependencies": {
 			"readable-stream@2.3.8": "patches/readable-stream@2.3.8.patch"
+		},
+		"overrides": {
+			"vite": "npm:rolldown-vite@7.3.0"
+		},
+		"peerDependencyRules": {
+			"allowedVersions": {
+				"vite": "7",
+				"esbuild": "0"
+			}
 		}
 	},
 	"prettier": "@modrinth/tooling-config/prettier.config.cjs"

packages/api-client/src/features/auth.ts

@@ -45,7 +45,7 @@ export interface AuthConfig extends FeatureConfig {
  * ```
  */
 export class AuthFeature extends AbstractFeature {
-	protected declare config: AuthConfig
+	declare protected config: AuthConfig
 
 	async execute<T>(next: () => Promise<T>, context: RequestContext): Promise<T> {
 		const token = await this.getToken()

packages/api-client/src/features/circuit-breaker.ts

@@ -111,7 +111,7 @@ export class InMemoryCircuitBreakerStorage implements CircuitBreakerStorage {
  * ```
  */
 export class CircuitBreakerFeature extends AbstractFeature {
-	protected declare config: Required<CircuitBreakerConfig>
+	declare protected config: Required<CircuitBreakerConfig>
 	private storage: CircuitBreakerStorage
 
 	constructor(config?: CircuitBreakerConfig) {

packages/api-client/src/features/retry.ts

@@ -70,7 +70,7 @@ export interface RetryConfig extends FeatureConfig {
  * ```
  */
 export class RetryFeature extends AbstractFeature {
-	protected declare config: Required<RetryConfig>
+	declare protected config: Required<RetryConfig>
 
 	constructor(config?: RetryConfig) {
 		super(config)

packages/api-client/src/platform/nuxt.ts

@@ -71,7 +71,7 @@ export interface NuxtClientConfig extends ClientConfig {
  * ```
  */
 export class NuxtModrinthClient extends AbstractModrinthClient {
-	protected declare config: NuxtClientConfig
+	declare protected config: NuxtClientConfig
 
 	constructor(config: NuxtClientConfig) {
 		super(config)

packages/api-client/src/platform/tauri.ts

@@ -37,7 +37,7 @@ interface HttpError extends Error {
  * ```
  */
 export class TauriModrinthClient extends AbstractModrinthClient {
-	protected declare config: TauriClientConfig
+	declare protected config: TauriClientConfig
 
 	constructor(config: TauriClientConfig) {
 		super(config)

packages/assets/styles/classes.scss

@@ -46,13 +46,13 @@
 	}
 
 	> :where(
-			input + *,
-			.input-group + *,
-			.textarea-wrapper + *,
-			.chips + *,
-			.resizable-textarea-wrapper + *,
-			.input-div + *
-		) {
+		input + *,
+		.input-group + *,
+		.textarea-wrapper + *,
+		.chips + *,
+		.resizable-textarea-wrapper + *,
+		.input-div + *
+	) {
 		margin-block-start: var(--gap-md);
 	}
 

packages/assets/styles/defaults.scss

@@ -7,8 +7,9 @@ body {
 	// Defaults
 	background-color: var(--color-bg);
 	color: var(--color-base);
-	--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
-		Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+	--font-standard:
+		Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell,
+		Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 	--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
 	font-family: var(--font-standard);
 	font-size: 16px;

packages/assets/styles/variables.scss

@@ -127,10 +127,12 @@
 	--shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 91%, 0.15);
 
 	--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
-	--shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
+	--shadow-raised:
+		0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
 		1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12),
 		4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09);
-	--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
+	--shadow-floating:
+		hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
 		hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
 
 	--shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
@@ -348,7 +350,8 @@ html {
 
 	--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
 	--shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
-	--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
+	--shadow-floating:
+		hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
 		hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
 
 	--shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;