A tiny, SSR-safe directive for binding random data to an element.
npm install vue-bind-onceA tiny, SSR-safe directive for binding random data to an element.
> A tiny, SSR-safe directive for binding random data to an element.
First install vue-bind-once:
``bash
yarn add vue-bind-once
npm install vue-bind-once --save
`
`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)
})
`
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.
This has been developed to suit my needs but additional use cases and contributions are very welcome.
MIT License - Copyright © Daniel Roe