https://github.com/danielroe/vue-bind-once

A tiny, SSR-safe directive for binding random data to an element.
https://github.com/danielroe/vue-bind-once

directive ssr vue

Last synced: 2 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/danielroe/vue-bind-once
• Owner: danielroe
• License: mit
• Created: 2022-02-22T11:56:51.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-13T19:53:19.000Z (7 months ago)
• Last Synced: 2024-04-13T20:45:35.978Z (7 months ago)
• Topics: directive, ssr, vue
• Language: TypeScript
• Homepage:
• Size: 2.61 MB
• Stars: 149
• Watchers: 4
• Forks: 5
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
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 { BindOnceDirective, BindOncePlugin } from 'vue-bind-once'

import App from './App.vue'

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

  import { nanoid } from 'nanoid'

  const id = nanoid()

  

  

```

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