fix: add options to prevent ssr mismatch on settings

app/composables/useSettings.ts

@@ -48,6 +48,8 @@ export function useSettings() {
   if (!settingsRef) {
     settingsRef = useLocalStorage<AppSettings>(STORAGE_KEY, DEFAULT_SETTINGS, {
       mergeDefaults: true,
+      initOnMounted: true,
+      writeDefaults: false,
     })
   }
 

tests/settings.spec.ts

@@ -0,0 +1,27 @@
+import { expect, test } from '@nuxt/test-utils/playwright'
+
+test.describe('Settings', () => {
+  test('settings persist across new tabs and reloads', async ({ page, goto }) => {
+    await goto('/settings', { waitUntil: 'domcontentloaded' })
+
+    const toggles = page.getByTestId('settings-toggle')
+    const toggleCount = await toggles.count()
+    expect(toggleCount).toBeGreaterThan(0)
+    for (let i = 0; i < toggleCount; i += 1) {
+      await toggles.nth(i).click()
+    }
+
+    const page2 = await page.context().newPage()
+    await page2.goto('/nuxt', { waitUntil: 'domcontentloaded' })
+
+    const storedBefore = await page.evaluate(() => localStorage.getItem('npmx-settings'))
+
+    await page.reload()
+    const storedAfter = await page.evaluate(() => localStorage.getItem('npmx-settings'))
+    expect(storedAfter).toBe(storedBefore)
+
+    await page2.reload()
+    const storedFromOtherTab = await page2.evaluate(() => localStorage.getItem('npmx-settings'))
+    expect(storedFromOtherTab).toBe(storedBefore)
+  })
+})