@kong-ui/core-app-layout v0.10.2

@kong-ui/core-app-layout

A Kong UI application layout component that provides a responsive navbar, sidebar, and main content area.

• Features
• Requirements
• Included components
• Install
  • Vue Plugin
  • In-Component registration
• Usage
  • Props
  • Slots
  • Teleport Containers
  • Usage Example
• TypeScript interfaces
• Individual component documentation

Features

• Responsive navbar component (see the navbar docs for more info)
• Responsive sidebar component (see the sidebar docs for more info)
• Main content slot with pre-configured styles, etc.
• Ability to takeover the default slot content for displaying global error states or other content

Requirements

• vue and vue-router must be initialized in the host application
• @kong/kongponents must be available as a dependency in the host application, along with the package's style imports. See here for instructions on installing Kongponents.
• The Vue app container element (the element the host Vue app is mounted in) must have an id of #app (alternatively, you must manually add a CSS rule of height: 100% to your element)
• The AppLayout.vue component must be the root-level element within your Vue app's <template> unless you are also utilizing the KonnectAppShell.vue component.
  • If using the KonnectAppShell.vue component, the AppLayout.vue component must be the only component placed inside the KonnectAppShell.vue's default slot.
• This package must not list any other package in this monorepository as a dependency or devDependency. This package will likely be published in the future for consumption by some of Kong's open-source applications.

Included components

• AppLayout.vue
• AppNavbar.vue
• NavbarDropdownMenu.vue
• AppSidebar.vue
• SidebarToggle.vue
• AppError.vue

Reference the individual component docs for more info.

Install

Install the component in your host application

yarn add @kong-ui/core-app-layout

Vue Plugin

Initialize the component as a plugin within your application's entry file (e.g. main.ts) to make the component globally available.

import { createApp } from 'vue'
import App from './App.vue'
import AppLayout from '@kong-ui/core-app-layout'

const app = createApp(App)

app.use(AppLayout)
app.mount('#app')

In-Component registration

Alternatively, import the component within your application's root component.

import { AppLayout } from '@kong-ui/core-app-layout'

Usage

Note: TODO - for now, you can reference the sandbox app pnpm --filter "@kong-ui/core-app-layout" run dev

Props

Note: TODO

Slots

Note: TODO

Teleport Containers

Note: TODO

Usage Example

Note: TODO

TypeScript interfaces

TypeScript interfaces are available here and can be directly imported into your host application.

Individual component documentation

• <AppNavbar.vue />
• <AppSidebar.vue />
• <AppError.vue />