@scalar/nuxt 0.0.7 → 0.0.9

package/README.md

@@ -5,6 +5,10 @@
 [![License](https://img.shields.io/npm/l/%40scalar%2Fnuxt)](https://www.npmjs.com/package/@scalar/nuxt)
 [![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)
 
+This plugin provides an easy way to render a beautiful API reference based on a OpenAPI/Swagger file with Nuxt.
+
+[![Screenshot of an API Reference](https://github.com/scalar/scalar/assets/6176314/178f4e4c-afdf-4c6a-bc72-128ea1786350)](https://docs.scalar.com/swagger-editor)
+
 ## Quick Setup
 
 Install the module to your Nuxt application with one command:

package/dist/module.d.mts

@@ -0,0 +1,9 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { ReferenceConfiguration } from '@scalar/api-reference';
+
+type Configuration = Omit<ReferenceConfiguration, 'layout' | 'isEditable' | 'onSpecUpdate'>;
+
+type ModuleOptions = Configuration;
+declare const _default: _nuxt_schema.NuxtModule<Configuration>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -1,2 +1,9 @@
-export * from "/home/runner/work/scalar/scalar/packages/nuxt/src/module";
-export { default } from "/home/runner/work/scalar/scalar/packages/nuxt/src/module";
+import * as _nuxt_schema from '@nuxt/schema';
+import { ReferenceConfiguration } from '@scalar/api-reference';
+
+type Configuration = Omit<ReferenceConfiguration, 'layout' | 'isEditable' | 'onSpecUpdate'>;
+
+type ModuleOptions = Configuration;
+declare const _default: _nuxt_schema.NuxtModule<Configuration>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@scalar/nuxt",
   "configKey": "scalarConfig",
-  "version": "0.0.7"
+  "version": "0.0.9"
 }

package/dist/module.mjs

@@ -1,12 +1,55 @@
-import jiti from "file:///home/runner/work/scalar/scalar/node_modules/.pnpm/jiti@1.21.0/node_modules/jiti/lib/index.js";
+import { defineNuxtModule, createResolver, addComponent, extendPages, addPlugin } from '@nuxt/kit';
 
-/** @type {import("/home/runner/work/scalar/scalar/packages/nuxt/src/module")} */
-const _module = jiti(null, {
-  "esmResolve": true,
-  "interopDefault": true,
-  "alias": {
-    "@scalar/nuxt": "/home/runner/work/scalar/scalar/packages/nuxt"
+const module = defineNuxtModule({
+  meta: {
+    name: "@scalar/nuxt",
+    configKey: "scalarConfig"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {
+    darkMode: true,
+    metaData: {
+      title: "API Documentation by Scalar"
+    },
+    pathRouting: {
+      basePath: "/docs"
+    },
+    showSidebar: true
+  },
+  setup(_options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    let isOpenApiEnabled = false;
+    _nuxt.options.build.transpile.push("@scalar/api-reference");
+    _nuxt.options.vite.optimizeDeps ||= {};
+    _nuxt.options.vite.optimizeDeps.include ||= [];
+    _nuxt.options.vite.optimizeDeps.include.push(
+      "debug",
+      "extend",
+      "stringify-object",
+      "rehype-highlight"
+    );
+    _nuxt.hook("nitro:config", (config) => {
+      if (config.experimental?.openAPI)
+        isOpenApiEnabled = true;
+    });
+    addComponent({
+      name: "ScalarApiReference",
+      export: "default",
+      filePath: resolver.resolve("./runtime/components/ScalarApiReference.vue")
+    });
+    extendPages((pages) => {
+      pages.push({
+        name: "scalar",
+        path: _options.pathRouting?.basePath + ":pathMatch(.*)*",
+        meta: {
+          configuration: _options,
+          isOpenApiEnabled
+        },
+        file: resolver.resolve("./runtime/pages/ScalarPage.vue")
+      });
+    });
+    addPlugin(resolver.resolve("./runtime/plugins/hydrateClient"));
   }
-})("/home/runner/work/scalar/scalar/packages/nuxt/src/module.ts");
+});
 
-export default _module;
+export { module as default };

package/dist/runtime/components/ScalarApiReference.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { useHead, useRequestURL, useSeoMeta } from '#imports'
+import { ModernLayout, parse } from '@scalar/api-reference'
+import '@scalar/api-reference/index.css'
+import { reactive, ref, toRaw } from 'vue'
+import type { Configuration } from '~/src/types'
+
+import './nuxt-theme.css'
+
+const props = defineProps<{
+  configuration: Configuration
+}>()
+
+const isDark = ref(props.configuration.darkMode)
+
+// Grab spec if we can
+const content: unknown = props.configuration.spec?.content
+  ? toRaw(props.configuration.spec.content)
+  : props.configuration.spec?.url
+    ? await $fetch(props.configuration.spec?.url)
+    : await $fetch('/_nitro/openapi.json')
+
+// Check for empty spec
+if (!content)
+  throw new Error('You must provide a spec for Scalar API References')
+
+const parsedSpec = reactive(await parse(content))
+const rawSpec = JSON.stringify(content)
+
+// Load up the metadata
+if (props.configuration?.metaData) useSeoMeta(props.configuration.metaData)
+
+useHead({
+  bodyAttrs: {
+    class: () => (isDark.value ? 'dark-mode' : 'light-mode'),
+  },
+})
+
+// Add baseServerURL
+const { origin } = useRequestURL()
+const config = {
+  baseServerURL: origin,
+  ...props.configuration,
+}
+</script>
+
+<template>
+  <ModernLayout
+    :configuration="config"
+    :isDark="isDark"
+    :parsedSpec="parsedSpec"
+    :rawSpec="rawSpec"
+    @toggleDarkMode="isDark = !isDark" />
+</template>

package/dist/runtime/components/nuxt-theme.css

@@ -0,0 +1 @@
+.light-mode{--scalar-background-1:#fff;--scalar-background-2:#f8fafc;--scalar-background-3:#e7e7e7;--scalar-background-accent:#8ab4f81f;--scalar-color-1:#000;--scalar-color-2:#6b7280;--scalar-color-3:#9ca3af;--scalar-color-accent:#00c16a;--scalar-border-color:#e5e7eb;--scalar-color-green:#069061;--scalar-color-red:#ef4444;--scalar-color-yellow:#f59e0b;--scalar-color-blue:#1d4ed8;--scalar-color-orange:#fb892c;--scalar-color-purple:#6d28d9;--scalar-button-1:#000;--scalar-button-1-hover:rgba(0,0,0,.9);--scalar-button-1-color:#fff}.dark-mode{--scalar-background-1:#020420;--scalar-background-2:#121a31;--scalar-background-3:#1e293b;--scalar-background-accent:#8ab4f81f;--scalar-color-1:#fff;--scalar-color-2:#cbd5e1;--scalar-color-3:#94a3b8;--scalar-color-accent:#00dc82;--scalar-border-color:#1e293b;--scalar-color-green:#069061;--scalar-color-red:#f87171;--scalar-color-yellow:#fde68a;--scalar-color-blue:#60a5fa;--scalar-color-orange:#fb892c;--scalar-color-purple:#ddd6fe;--scalar-button-1:hsla(0,0%,100%,.9);--scalar-button-1-hover:hsla(0,0%,100%,.8);--scalar-button-1-color:#000}.dark-mode .t-doc__sidebar,.light-mode .t-doc__sidebar{--scalar-sidebar-background-1:var(--scalar-background-1);--scalar-sidebar-color-1:var(--scalar-color-1);--scalar-sidebar-color-2:var(--scalar-color-3);--scalar-sidebar-border-color:var(--scalar-border-color);--scalar-sidebar-item-hover-background:transparent;--scalar-sidebar-item-hover-color:var(--scalar-color-1);--scalar-sidebar-item-active-background:transparent;--scalar-sidebar-color-active:var(--scalar-color-accent);--scalar-sidebar-search-background:transparent;--scalar-sidebar-search-color:var(--scalar-color-3);--scalar-sidebar-search-border-color:var(--scalar-border-color);--scalar-sidebar-indent-border:var(--scalar-border-color);--scalar-sidebar-indent-border-hover:var(--scalar-color-1);--scalar-sidebar-indent-border-active:var(--scalar-color-accent)}.scalar-card .request-card-footer{--scalar-background-3:var(--scalar-background-2);--scalar-button-1:#0f172a;--scalar-button-1-hover:rgba(30,41,59,.5);--scalar-button-1-color:#fff}.scalar-card .show-api-client-button{border:1px solid #334155!important}

package/dist/runtime/pages/ScalarPage.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { useRoute } from '#imports'
+import type { Meta } from '~/src/types'
+
+const route = useRoute()
+const meta = route.meta as Meta
+
+// Ensure we have a spec
+if (
+  !meta.isOpenApiEnabled &&
+  !meta.configuration?.spec?.url &&
+  !meta.configuration?.spec?.content
+)
+  throw new Error(
+    'You must either provide a spec to scalarConfig, or enable experimental openApi in the Nitro config.',
+  )
+</script>
+
+<template>
+  <ScalarApiReference :configuration="meta.configuration" />
+</template>

package/dist/runtime/plugins/hydrateClient.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/hydrateClient.mjs

@@ -0,0 +1,13 @@
+import { defineNuxtPlugin } from "#app";
+import { useHead } from "#imports";
+export default defineNuxtPlugin((_nuxtApp) => {
+  _nuxtApp.hook("app:rendered", ({ ssrContext }) => {
+    useHead({
+      script: [
+        {
+          children: `window.__SCALAR__ = ${JSON.stringify(ssrContext?.payload?.data ?? {})}`
+        }
+      ]
+    });
+  });
+});

package/dist/types.d.mts

@@ -1,25 +1,16 @@
 
-import type { ModuleOptions, ModuleHooks, RuntimeModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module.js'
+import type { ModuleOptions } from './module.js'
 
-declare module '#app' {
-  interface RuntimeNuxtHooks extends RuntimeModuleHooks, ModuleRuntimeHooks {}
-}
 
 declare module '@nuxt/schema' {
   interface NuxtConfig { ['scalarConfig']?: Partial<ModuleOptions> }
   interface NuxtOptions { ['scalarConfig']?: ModuleOptions }
-  interface NuxtHooks extends ModuleHooks {}
-  interface RuntimeConfig extends ModuleRuntimeConfig {}
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
 }
 
 declare module 'nuxt/schema' {
   interface NuxtConfig { ['scalarConfig']?: Partial<ModuleOptions> }
   interface NuxtOptions { ['scalarConfig']?: ModuleOptions }
-  interface NuxtHooks extends ModuleHooks {}
-  interface RuntimeConfig extends ModuleRuntimeConfig {}
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
 }
 
 
-export type { default } from './module.js'
+export type { ModuleOptions, default } from './module.js'

package/dist/types.d.ts

@@ -1,25 +1,16 @@
 
-import type { ModuleOptions, ModuleHooks, RuntimeModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module'
+import type { ModuleOptions } from './module'
 
-declare module '#app' {
-  interface RuntimeNuxtHooks extends RuntimeModuleHooks, ModuleRuntimeHooks {}
-}
 
 declare module '@nuxt/schema' {
   interface NuxtConfig { ['scalarConfig']?: Partial<ModuleOptions> }
   interface NuxtOptions { ['scalarConfig']?: ModuleOptions }
-  interface NuxtHooks extends ModuleHooks {}
-  interface RuntimeConfig extends ModuleRuntimeConfig {}
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
 }
 
 declare module 'nuxt/schema' {
   interface NuxtConfig { ['scalarConfig']?: Partial<ModuleOptions> }
   interface NuxtOptions { ['scalarConfig']?: ModuleOptions }
-  interface NuxtHooks extends ModuleHooks {}
-  interface RuntimeConfig extends ModuleRuntimeConfig {}
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
 }
 
 
-export type { default } from './module'
+export type { ModuleOptions, default } from './module'

package/package.json

@@ -15,7 +15,7 @@
     "testing",
     "vue"
   ],
-  "version": "0.0.7",
+  "version": "0.0.9",
   "engines": {
     "node": ">=18"
   },