Kongponents is a Vue component library of frequently needed UI elements. They were developed to solve Kong's application needs, but are generic enough to use in any web application.

Install ​

To begin using Kongponents, start by installing the package into your project.

yarn add @kong/kongponents

If you choose to utilize any of the CSS custom properties (variables) included in the @kong/kongponents package and your project uses PostCSS, you will likely need use the postcss-custom-properties PostCSS plugin so that the variables are preserved in their original form.

yarn add postcss-custom-properties --dev

Next, add a postcss.config.js file to your project with the following content

// postcss.config.js

module.exports = () => ({
  plugins: {
    'postcss-custom-properties': {
      preserve: true
    }
  }
})

Define global constant replacements ​

If your app utilizes Vite, you may need to define global constant replacements in your vite.config.ts file as shown here:

export default defineConfig({
  // Define global constant replacements
  define: {
    'process.env.development': JSON.stringify('development'),
    'process.env.production': JSON.stringify('production'),
  },
})

Optimize or Transpile Dependencies ​

Depending on your project setup, you may need to optimize or transpile the @kong/kongponents package in your project.

If your project uses Vite, just add the following to your `vite.config.ts

export default defineConfig({
  build: {
    commonjsOptions: {
      include: [
        /@kong\/kongponents/,
        /node_modules/
      ]
    },
  }
})

If your project already has a vue.config.ts file, just add the following transpileDependencies entry

// vue.config.ts

module.exports = {
  transpileDependencies: [
    /@kong\/kongponents/
  ]
}

If your project does not have a vue.config.ts file and instead uses webpack config files, you can add a loader rule (for example, for babel-loader) similar to the following (only showing the relevant entries)

// webpack.config.js

module.exports = (env) => {
  return {
    module: {
      loaders: [
        // transpile Kongponents packages
        {
          test: /\.js$/,
          include: /(node_modules)\/(@kong\/kongponents)/,
          loader: 'babel-loader',
        },
        // process all .js files, but ignore all other node_modules not listed above
        {
          test: /\.js$/,
          exclude: /(node_modules)/,
          loader: 'babel-loader'
        },
      ]
    }
  }
}

Using Kongponents from CDN ​

You can also use Kongponents in a project where there is no build system as long as Vue is included on the page.

Example ​

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/@kong/kongponents@8/dist/kongponents.umd.js"></script>
<link href="https://unpkg.com/@kong/kongponents@8/dist/style.css" rel="stylesheet" />

<div id="app">
  <k-button appearance="primary" v-on:click="count += 1" icon="plus">Add</k-button>
  <p>Click count: {{ count }}</p>
</div>

<script>
  const {
    createApp
  } = Vue
  const components = Kongponents
  createApp({
    components: {
      KButton: components.KButton
    },
    data() {
      return {
        count: 1
      }
    }
  }).mount('#app')
</script>