@scalar/nuxt 0.3.34 → 0.4.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@scalar/nuxt",
   "configKey": "scalar",
-  "version": "0.3.34",
+  "version": "0.4.2",
   "builder": {
     "@nuxt/module-builder": "0.8.1",
     "unbuild": "unknown"

package/dist/runtime/components/ScalarApiReference.vue

@@ -1,15 +1,22 @@
 <script lang="ts" setup>
 import { ModernLayout, parse } from '@scalar/api-reference'
 import type { ApiReferenceConfiguration } from '@scalar/types/api-reference'
+import { useColorMode } from '@scalar/use-hooks/useColorMode'
 import { useFetch, useHead, useRequestURL, useSeoMeta } from '#imports'
 import type { Configuration } from '~/src/types'
-import { reactive, ref, toRaw } from 'vue'
+import { onMounted, reactive, ref, toRaw, watch } from 'vue'
 
 const props = defineProps<{
   configuration: Configuration
 }>()
 
 const isDark = ref(props.configuration.darkMode)
+const forcedMode = props.configuration.forceDarkModeState
+
+const { colorMode, toggleColorMode } = useColorMode({
+  initialColorMode: props.configuration.darkMode ? 'dark' : 'light',
+  overrideColorMode: props.configuration.forceDarkModeState,
+})
 
 // @ts-expect-error support the old syntax for a bit
 const content = props.configuration.spec?.content ?? props.configuration.content
@@ -41,9 +48,34 @@ if (props.configuration?.metaData) {
 }
 
 useHead({
-  bodyAttrs: {
-    class: () => (isDark.value ? 'dark-mode' : 'light-mode'),
-  },
+  script: [
+    {
+      // Inject dark / light detection that runs before loading Nuxt to avoid flicker
+      // This is a bit of a hack inspired by @nuxtjs/color-mode, but it works
+      id: 'scalar-color-mode-script',
+      tagPosition: 'bodyClose',
+      innerHTML: `((isDark, forced) => {
+        try {
+          const stored = window.localStorage.getItem('colorMode');
+          const useDark = forced === 'dark' || !forced && (stored === 'dark' || !stored && isDark);
+          window.document.body.classList.add(useDark ? 'dark-mode' : 'light-mode');
+        } catch {}
+      })(${isDark.value}, ${JSON.stringify(forcedMode)});`
+        .replace(/[\n\r]/g, '')
+        .replace(/ +/g, ' '),
+    },
+  ],
+})
+
+watch(colorMode, () => {
+  isDark.value = colorMode.value === 'dark'
+})
+
+onMounted(() => {
+  // Adjust the color mode toggle switch
+  isDark.value = window.document.body.classList.contains('dark-mode')
+  // Remove scalar-color-mode-script
+  window.document.getElementById('scalar-color-mode-script')?.remove()
 })
 
 // Add baseServerURL and _integration
@@ -62,7 +94,7 @@ const config: Partial<ApiReferenceConfiguration> = {
     :isDark="!!isDark"
     :parsedSpec="parsedSpec"
     :rawSpec="rawSpec"
-    @toggleDarkMode="isDark = !isDark" />
+    @toggleDarkMode="() => toggleColorMode()" />
 </template>
 
 <style>

package/package.json

@@ -20,9 +20,9 @@
     "testing",
     "vue"
   ],
-  "version": "0.3.34",
+  "version": "0.4.2",
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "type": "module",
   "main": "./dist/module.cjs",
@@ -39,9 +39,10 @@
   ],
   "dependencies": {
     "@nuxt/kit": "^3.12.3",
-    "@scalar/api-client": "2.3.34",
-    "@scalar/api-reference": "1.28.34",
-    "@scalar/types": "0.1.16"
+    "@scalar/api-client": "2.4.2",
+    "@scalar/api-reference": "1.29.2",
+    "@scalar/use-hooks": "0.2.1",
+    "@scalar/types": "0.2.1"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.3.9",
@@ -51,11 +52,12 @@
     "@nuxt/test-utils": "^3.13.1",
     "@types/node": "^20.17.10",
     "changelogen": "^0.5.5",
+    "cross-env": "^7.0.3",
     "nuxt": "^3.12.4",
     "vitest": "^1.6.0"
   },
   "scripts": {
-    "build": "NUXT_TELEMETRY_DISABLED=false pnpm dev:prepare && nuxt-module-build build",
+    "build": "cross-env NUXT_TELEMETRY_DISABLED=false pnpm dev:prepare && nuxt-module-build build",
     "dev": "pnpm dev:prepare && nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxi prepare && nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",