Vue 3 Ref Registry

Introduction

This library keeps a central registry of all component refs in your application and provides a complete new way of inter-component communication.

Usage

The plugin can be installed in your main.js file (or wherever you set up your Vue instance) by adding the following line:

import { createApp } from 'vue'
import App from './App.vue'
import RefRegistry from 'vue3-ref-registry'

const app = createApp(App)

app.use(RefRegistry)

app.mount('#app')

Whenever you set a ref on a component, the plugin will automatically register it in the registry.

<template>
  <component-a ref="componentA"></component-a>
</template>

You can then use the following composable to get the list of refs:

<script setup>
import { useRefRegistry } from 'vue3-ref-registry'

const registry = useRefRegistry()
registry.value.componentA.sayHello()
</script>

script setup

A quick heads-up if you are using the script setup syntax: variables and methods defined in a <script setup> are per default private and cannot be accessed from outside.

If you want to be able to access them from outside, you need to use the defineExpose syntax:

<script setup>
const sayHello = () => {
  console.log('Hello')
}

defineExpose({ sayHello })
</script>

A word of caution

This library is built on Vue mixins, a feature that is supported in Vue 3 due to backwards compatibility. However, this feature is generally not recommend for use in Vue 3.