From a04d660ebad9317ae8d652d5473c850f1f58d267 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 5 Dec 2024 13:26:43 -0500
Subject: [PATCH] fix(*): clean up vue-bind-once references [KHCP-14269]

---
 cypress/support/index.ts   | 3 +--
 docs/guide/contributing.md | 9 +--------
 docs/guide/usage.md        | 8 --------
 src/index.ts               | 3 ---
 4 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/cypress/support/index.ts b/cypress/support/index.ts
index 0df0d3c591..1976b6db94 100644
--- a/cypress/support/index.ts
+++ b/cypress/support/index.ts
@@ -3,7 +3,6 @@ import { mount } from 'cypress/vue'
 import { createMemoryHistory, createRouter } from 'vue-router/dist/vue-router.prod.cjs'
 import type { RouteRecordRaw } from 'vue-router'
 import type { App, ComputedOptions } from 'vue'
-import { BindOncePlugin } from 'vue-bind-once'
 import Chainable = Cypress.Chainable
 import 'cypress-fail-fast'
 // Import Kongponent styles
@@ -38,7 +37,7 @@ Cypress.Commands.add('mount', (component: ComputedOptions, options = {}): Chaina
         app.use(options.router)
       }
     },
-  }, BindOncePlugin)
+  })
 
   return mount(component, options)
 })
diff --git a/docs/guide/contributing.md b/docs/guide/contributing.md
index 8639dca174..44a87c63d8 100644
--- a/docs/guide/contributing.md
+++ b/docs/guide/contributing.md
@@ -218,7 +218,7 @@ It's essential to choose context-aware and descriptive names. This practice ensu
 
 #### Attributes
 
-Sometimes you will need to generate a random string to be used as value for various attributes (e.g. accessibility-related attributes like `id`, `for`, `aria-labelledby`, etc.). 
+Sometimes you will need to generate a random string to be used as value for various attributes (e.g. accessibility-related attributes like `id`, `for`, `aria-labelledby`, etc.).
 
 To generate a unique id so that it is safe for SSR, you **must** use the `useUniqueId` composable in your component:
 
@@ -230,13 +230,6 @@ const id = useUniqueId()
 </script>
 ```
 
-Then you must use the [`v-bind-once` directive](https://github.com/danielroe/vue-bind-once) to bind the unique id to element attributes (this prevents hydration issues in SSR apps):
-
-```html
-<label v-bind-once="{ for: id }">Label</label>
-<input v-bind-once="{ id: id }" />
-```
-
 ## Testing your component
 
 You're free to play around with your component on the local instance of the docs site by running `pnpm docs:dev`; however, you may also want to test your local changes in a consuming application.
diff --git a/docs/guide/usage.md b/docs/guide/usage.md
index c1c32b7705..c265f0e4b3 100644
--- a/docs/guide/usage.md
+++ b/docs/guide/usage.md
@@ -68,9 +68,6 @@ Import and registration can be done individually in the app entry file (e.g. `ma
 ```ts
 // main.ts (or Vue entry file)
 
-// Kongponents rely on vue-bind-once directive to work properly
-// The Kongponents bundle includes the vue-bind-once package so you won't need to install it separately, but it does need to be registered
-import { BindOncePlugin } from 'vue-bind-once'
 import { createApp } from 'vue'
 import { KButton } from '@kong/kongponents'
 import '@kong/kongponents/dist/style.css'
@@ -79,9 +76,6 @@ import '@kong/kongponents/dist/style.css'
 
 const app = createApp(App)
 
-// Register the vue-bind-once directive as a Vue Plugin
-app.use(BindOncePlugin)
-
 // Register an individual Kongponent
 app.component('KButton', KButton)
 
@@ -115,8 +109,6 @@ this path instead: import '~@kong/kongponents/dist/style.css' */
 </style>
 ```
 
-When using Kongponents individually like this you will still need to register [`vue-bind-once` plugin](https://github.com/danielroe/vue-bind-once). Please refer to [global registration](#global-registration) section for example.
-
 ## TypeScript interfaces
 
 :::tip NOTE
diff --git a/src/index.ts b/src/index.ts
index 834a76af48..91f1a6dfcc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,6 @@
 import type { App } from 'vue'
 import * as components from './components' // Import all components
 import './styles/styles.scss' // Import all styles
-import { BindOncePlugin } from 'vue-bind-once'
 
 // Export Vue plugin
 export default {
@@ -10,8 +9,6 @@ export default {
       // @ts-ignore: key is a valid string
       app.component(key, components[key])
     }
-
-    app.use(BindOncePlugin)
   },
 }