@scalar/nuxt 0.3.33 → 0.4.2

package/dist/module.d.mts

@@ -22,6 +22,7 @@ type ModuleOptions = {
      * configurations. These configurations will extend over the base config
      */
     configurations: Omit<Configuration, 'devtools'>[];
+    layout: string | false;
 } & Configuration;
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 

package/dist/module.d.ts

@@ -22,6 +22,7 @@ type ModuleOptions = {
      * configurations. These configurations will extend over the base config
      */
     configurations: Omit<Configuration, 'devtools'>[];
+    layout: string | false;
 } & Configuration;
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 

package/dist/module.json

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

package/dist/module.mjs

@@ -16,7 +16,8 @@ const module = defineNuxtModule({
     },
     showSidebar: true,
     devtools: true,
-    configurations: []
+    configurations: [],
+    layout: false
   },
   setup(_options, _nuxt) {
     const resolver = createResolver(import.meta.url);
@@ -57,6 +58,7 @@ const module = defineNuxtModule({
             name: "scalar-" + index,
             path: configuration.pathRouting?.basePath + ":pathMatch(.*)*",
             meta: {
+              layout: _options.layout,
               configuration,
               isOpenApiEnabled
             },
@@ -68,6 +70,7 @@ const module = defineNuxtModule({
           name: "scalar",
           path: _options.pathRouting?.basePath + ":pathMatch(.*)*",
           meta: {
+            layout: _options.layout,
             configuration: _options,
             isOpenApiEnabled
           },

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 { useHead, useRequestURL, useSeoMeta } from '#imports'
+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
@@ -23,8 +30,9 @@ const document =
     : content
       ? toRaw(content)
       : url
-        ? await $fetch<string>(url)
-        : await $fetch<string>('/_openapi.json')
+        ? (await useFetch<string>(url, { responseType: 'text' })).data.value
+        : (await useFetch<string>('/_openapi.json', { responseType: 'text' }))
+            .data.value
 
 // Check for empty spec
 if (!document) {
@@ -40,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
@@ -61,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.33",
+  "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.33",
-    "@scalar/types": "0.1.15",
-    "@scalar/api-reference": "1.28.33"
+    "@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",