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
`

$3

`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)
})
`

$3

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 - Copyright © Daniel Roe