@kong-ui-public/spec-details NPM

@kong-ui-public/spec-details

A Kong UI component for displaying API specs

Features

Render .yaml and .json OAS specs
Customize display of API specs in the UI

Requirements

vue must be initialized in the host application

Usage

Install

Install the component in your host application

yarn add @kong-ui-public/spec-details

Register

You can register portal-spec-details globally or locally.

// Global registration
import { createApp } from 'vue'
import SpecDetails from '@kong-ui-public/spec-details'
import '@kong-ui-public/spec-details/dist/style.css'

const app = createApp(App)

app.use(SpecDetails)

<!-- Local registration -->
<template>
  <SpecDetails />
</template>

<script setup lang="ts">
import SpecDetails from '@kong-ui-public/spec-details'
import '@kong-ui-public/spec-details/dist/style.css'
</script>

Props

`document`

type: String|Object
required: false
default: null

Specification object or string. Required if url property is not set.

`url`

type: String
required: false
default: ''

URL of the specification file. Required if document property is not set.

`hasSidebar`

type: Boolean
required: false
default: true

Whether or not the SwaggerUI navigation sidebar is enabled.

`relativeSidebar`

type: Boolean
required: false
default: false

Position the sidebar relatively instead of fixed. Both hasSidebar and essentialsOnly must be true for the positioning to be correct since we aren't predicting the height of the info block.