@kong/portal-vue-mini-spec-renderer

@kong/portal-vue-mini-spec-renderer

A Kong UI mini component for displaying API specs

• Features
• Requirements
• Usage
  • Install
  • Register
• Props
  • spec
  • isSummary
  • width
• Slots
  • empty-state
  • error-state
• Emits
  • selected

Features

• Render spec styled object arrays
• Support both table of contents and list summary views

Requirements

• vue must be initialized in the host application

Usage

Install

Install the component in your host application

yarn add @kong/portal-vue-mini-spec-renderer

Register

You can register portal-vue-mini-spec-renderer globally or locally.

// Global registration
import { createApp } from 'vue'
import VueMiniSpecRenderer from '@kong/portal-vue-mini-spec-renderer'
import '@kong/portal-vue-mini-spec-renderer/dist/style.css'

const app = createApp(App)

app.use(VueMiniSpecRenderer)

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

<script setup lang="ts">
import VueMiniSpecRenderer from '@kong/portal-vue-mini-spec-renderer'
import '@kong/portal-vue-mini-spec-renderer/dist/style.css'
</script>

Props

spec

• type: Object[]
• required: true

Specification object array. Required. The objects should conform to the following interface.

{
  path: string
  method: string
  operationId: string | null
  tags: string[]
  summary: string | null
  deprecated: boolean
  selected?: boolean
  key?: string
}

isSummary

• type: Boolean
• required: false
• default: false

If enabled, will display list summary view with a few more details instead of table of contents style.

width

• type: String
• required: false
• default: 210

Controls the width of the rendered spec. Currently supports numbers (will be converted to px), auto, vw, vh, and percentages for width.

Slots

empty-state

Controls the content displayed when the spec array is empty.

error-state

Controls the content when spec is not provided.

Emits

selected

• returns: Object - the last clicked item data

{
  path: string
  method: string
  operationId: string | null
  tags: string[]
  summary: string | null
  deprecated: boolean
  selected?: boolean
  key?: string
}

This is emitted whenever an item in the spec is clicked. Clicking an item will deselect any previously selected items.