1️⃣ vue-bind-once

A tiny, SSR-safe directive for binding random data to an element.

> A tiny, SSR-safe directive for binding random data to an element. ## Quick Start First install `vue-bind-once`: ```bash yarn add vue-bind-once # or npm npm install vue-bind-once --save ``` ### Register directive ```ts import { createApp } from 'vue' import App from './App.vue' import { BindOnceDirective, BindOncePlugin } from 'vue-bind-once' const app = createApp(App) app.use(BindOncePlugin) // or app.directive('bind-once', BindOnceDirective) ``` In most cases you'll be using this directive with an SSR-rendering framework like `nuxt`, which may have a different way for you to register this directive. For example, in a Nuxt plugin: ```js import { BindOncePlugin } from 'vue-bind-once' export default defineNuxtPlugin(nuxtApp => { nuxtApp.vueApp.use(BindOncePlugin) }) ``` ### Usage You can now use the directive on any element where you need a binding to a value that needs to match between client/server but won't change dynamically afterwards. ```html ``` This will work on both server and on client re-hydration. ## Contributors This has been developed to suit my needs but additional use cases and contributions are very welcome. ## License [MIT License](./LICENSE) - Copyright © Daniel Roe