create-context-vue

Vue implementation of react's context API

Installation

npm install create-context-vue

Usage

Create a context

const CountContext = createContext(0)

Wrap consumer with provider

<template>
  <CountContext.provider :value="count">
    <Consumer />
  </CountContext.provider>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

Inject context

<template>
  {{ injectedCount }}
</template>

<script setup>
const injectedCount = CountContext.use()
</script>

Or use create-sync-context to create context with two-way binding

const SyncCountContext = createSyncContext(0)

<template>
  <SyncCountContext.provider v-model="count">
    <Consumer />
  </SyncCountContext.provider>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>