Skip to content

danielroe/vue-bind-once

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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:

yarn add vue-bind-once

# or npm

npm install vue-bind-once --save

Register directive

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:

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.

<script setup>
  import { nanoid } from 'nanoid'
  const id = nanoid()
</script>
<template>
  <input type="text" v-bind-once="{ id, name: id }" />
  <label v-bind-once="{ for: id }" />
</template>

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