Route entity components.
-
vue
andvue-router
must be initialized in the host application. -
@kong/kongponents
must be added as a dependency in the host application, globally available via the Vue Plugin installation, and the package's style imports must be added in the app entry file. See here for instructions on installing Kongponents. -
@kong-ui-public/i18n
must be available as adependency
in the host application. -
axios
must be installed as a dependency in the host application. - If you want to enable Kong's Expressions language-related features in your host app,
@kong-ui-public/expressions
andmonaco-editor
must be installed as dependencies in the host application.
RouteList
RouteForm
RouteConfigCard
Reference the individual component docs for more info.
Install the component in your host application
yarn add @kong-ui-public/entities-routes
If you want to enable expressions feature, you also need to install devDependencies
in your host application:
yarn add -D vite-plugin-monaco-editor
Enable the vite-plugin-monaco-editor
plugin. Your Vite config should look like this:
import monacoEditorPlugin from 'vite-plugin-monaco-editor'
export default defineConfig({
// ...
plugins: [
monacoEditorPlugin({}),
],
// ...
})
Import the component(s) in your host application as well as the package styles
import { RouteList, RouteForm, RouteConfigCard } from '@kong-ui-public/entities-routes'
import '@kong-ui-public/entities-routes/dist/style.css'
This package utilizes @kong-ui-public/expressions
and monaco-editor
to support Kong's Expressions language-related features. You will need to ensure these dependencies are installed in your host application to enable these features.
As of now, <RouteForm.vue />
is the only component with Expressions features(controlled via the routeFlavor
prop).