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.

pnpm 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.

pnpm 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.

NOTE

You must import the CSS from the @kong/kongponents package along with Vue.

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>