@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

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

Register

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

1// Global registration
2import { createApp } from 'vue'
3import VueMiniSpecRenderer from '@kong/portal-vue-mini-spec-renderer'
4import '@kong/portal-vue-mini-spec-renderer/dist/style.css'
5
6const app = createApp(App)
7
8app.use(VueMiniSpecRenderer)
9

1<!-- Local registration -->
2<template>
3  <VueMiniSpecRenderer />
4</template>
5
6<script setup lang="ts">
7import VueMiniSpecRenderer from '@kong/portal-vue-mini-spec-renderer'
8import '@kong/portal-vue-mini-spec-renderer/dist/style.css'
9</script>

Props

spec

• type: Object[]
• required: true

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

1{
2  path: string
3  method: string
4  operationId: string | null
5  tags: string[]
6  summary: string | null
7  deprecated: boolean
8  selected?: boolean
9  key?: string
10}

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

1{
2  path: string
3  method: string
4  operationId: string | null
5  tags: string[]
6  summary: string | null
7  deprecated: boolean
8  selected?: boolean
9  key?: string
10}

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