@scalar/nuxt 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present Scalar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,71 @@
+# Scalar API Reference Nuxt Module
+
+[![Version](https://img.shields.io/npm/v/%40scalar/nuxt)](https://www.npmjs.com/package/@scalar/nuxt)
+[![Downloads](https://img.shields.io/npm/dm/%40scalar/nuxt)](https://www.npmjs.com/package/@scalar/nuxt)
+[![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)
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add @scalar/nuxt
+```
+
+That's it! You can now use @scalar/nuxt in your Nuxt app ✨
+
+## Configuration
+
+If you are using nuxt server routes you can enable scalar simply by enabling openAPI in the nitro
+config in your nuxt.config.ts
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@scalar/nuxt'],
+  nitro: {
+    experimental: {
+      openAPI: true,
+    },
+  },
+})
+```
+
+If you would like to add your own OpenAPI spec file you can do so with the following minimal config
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@scalar/nuxt'],
+  scalarConfig: {
+    spec: {
+      url: 'https://cdn.scalar.com/spec/openapi_petstore.json',
+    },
+  },
+})
+```
+
+By default the docs will be hosted at `/scalar` but you an easily customize that, here's a more in
+depth config example.
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@scalar/nuxt'],
+  scalarConfig: {
+    darkMode: true,
+    hideModals: false,
+    hideDownloadButton: false,
+    metaData: {
+      title: 'API Documentation by Scalar',
+    },
+    proxy: 'https://api.scalar.com/request-proxy',
+    searchHotKey: 'k',
+    showSidebar: true,
+    pathRouting: {
+      basePath: '/scalar',
+    },
+    spec: {
+      url: 'https://cdn.scalar.com/spec/openapi_petstore.json',
+    },
+  },
+})
+```

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

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

@@ -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.json

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

package/dist/module.mjs

@@ -0,0 +1,46 @@
+import { defineNuxtModule, createResolver, addComponent, extendPages, addPlugin } from '@nuxt/kit';
+
+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: "/scalar"
+    },
+    showSidebar: true
+  },
+  setup(_options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    let isOpenApiEnabled = false;
+    _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"));
+  }
+});
+
+export { module as default };

package/dist/runtime/components/ScalarApiReference.vue

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

package/dist/runtime/pages/ScalarPage.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+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,12 @@
+import { defineNuxtPlugin } from "#app";
+export default defineNuxtPlugin((_nuxtApp) => {
+  _nuxtApp.hook("app:rendered", ({ ssrContext }) => {
+    useHead({
+      script: [
+        {
+          children: `window.__SCALAR__ = ${JSON.stringify(ssrContext?.payload?.data ?? {})}`
+        }
+      ]
+    });
+  });
+});

package/dist/types.d.mts

@@ -0,0 +1,16 @@
+
+import type { ModuleOptions } from './module.js'
+
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['scalarConfig']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['scalarConfig']?: ModuleOptions }
+}
+
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['scalarConfig']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['scalarConfig']?: ModuleOptions }
+}
+
+
+export type { ModuleOptions, default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,16 @@
+
+import type { ModuleOptions } from './module'
+
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['scalarConfig']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['scalarConfig']?: ModuleOptions }
+}
+
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['scalarConfig']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['scalarConfig']?: ModuleOptions }
+}
+
+
+export type { ModuleOptions, default } from './module'

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@scalar/nuxt",
+  "description": "Nuxt integration for Scalar API references",
+  "license": "MIT",
+  "author": "Scalar (https://github.com/scalar)",
+  "homepage": "https://github.com/scalar/scalar",
+  "bugs": "https://github.com/scalar/scalar/issues/new/choose",
+  "keywords": [
+    "api",
+    "references",
+    "nuxt",
+    "docs",
+    "postman alternative",
+    "rest",
+    "testing",
+    "vue"
+  ],
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=18"
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@nuxt/kit": "^3.11.2",
+    "@scalar/api-reference": "1.20.30"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^1.1.5",
+    "@nuxt/eslint-config": "^0.3.4",
+    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/schema": "^3.11.2",
+    "@nuxt/test-utils": "^3.12.0",
+    "@types/node": "^20.8.4",
+    "changelogen": "^0.5.5",
+    "eslint": "^8.56.0",
+    "nuxt": "^3.11.2",
+    "vitest": "^1.2.2"
+  },
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "lint:check": "eslint .",
+    "lint:fix": "eslint .  --fix",
+    "postinstall": "pnpm dev:prepare",
+    "toist": "vitest run",
+    "test:watch": "vitest watch",
+    "types:check": "nuxi typecheck"
+  }
+}