Examples
Using the Provider and Consumer components
Preview
Count: 0
vue
<script setup lang="ts">
import { reactive, ref } from "vue";
import CountContext from "./count-context.ts";
import CountDisplay from "./count-display.vue";
const count = ref(0);
const contextValue = reactive({ count });
</script>
<template>
<div>
<CountContext.Provider :value="contextValue">
<CountDisplay />
</CountContext.Provider>
<button @click="count++">Increment</button>
</div>
</template>
<style scoped>
div {
display: flex;
flex-direction: column;
padding: 20px;
gap: 16px;
}
button {
background-color: darkgreen;
color: white;
padding: 4px 16px;
border-radius: 8px;
font-size: 16px;
}
</style>vue
<script setup lang="ts">
import CountContext from "./count-context.ts";
</script>
<template>
<CountContext.Consumer v-slot="value">
<p>Count: {{ value?.count }}</p>
</CountContext.Consumer>
</template>
<style scoped>
p {
font-size: 24px;
}
</style>ts
import { createContext } from "@aryan02420/vue-context";
const CountContext = createContext<{ count: number }>('count');
export default CountContext;Using the useContext composable
Preview
Count: 0
vue
<script setup lang="ts">
import { reactive, ref } from "vue";
import CountContext from "./count-context.ts";
import CountDisplay from "./count-display.vue";
const count = ref(0);
const contextValue = reactive({ count });
</script>
<template>
<div>
<CountContext.Provider :value="contextValue">
<CountDisplay />
</CountContext.Provider>
<button @click="count++">Increment</button>
</div>
</template>
<style scoped>
div {
display: flex;
flex-direction: column;
padding: 20px;
gap: 16px;
}
button {
background-color: darkgreen;
color: white;
padding: 4px 16px;
border-radius: 8px;
font-size: 16px;
}
</style>vue
<script setup lang="ts">
import CountContext from "./count-context.ts";
import { useContext } from "@aryan02420/vue-context";
const value = useContext(CountContext);
</script>
<template>
<p>Count: {{ value?.count }}</p>
</template>
<style scoped>
p {
font-size: 24px;
}
</style>ts
import { createContext } from "@aryan02420/vue-context";
const CountContext = createContext<{ count: number }>('count');
export default CountContext;Using a fallback value
Preview
Count: 42
vue
<script setup lang="ts">
import CountDisplay from "./count-display.vue";
</script>
<template>
<div>
<CountDisplay />
</div>
</template>
<style scoped>
div {
display: flex;
flex-direction: column;
padding: 20px;
gap: 16px;
}
</style>vue
<script setup lang="ts">
import CountContext from "./count-context.ts";
import { useContext } from "@aryan02420/vue-context";
const value = useContext(CountContext);
</script>
<template>
<p>Count: {{ value?.count }}</p>
</template>
<style scoped>
p {
font-size: 24px;
}
</style>ts
import { createContext } from "@aryan02420/vue-context";
const DEFAULT_VALUE = { count: 42 };
const CountContext = createContext<{ count: number }>('count', DEFAULT_VALUE);
export default CountContext;Using the createContext util
Preview
Count: 0
vue
<script setup lang="ts">
import { reactive, ref } from "vue";
import { CountProvider } from "./count-context.ts";
import CountDisplay from "./count-display.vue";
const count = ref(0);
const contextValue = reactive({ count });
</script>
<template>
<div>
<CountProvider :value="contextValue">
<CountDisplay />
</CountProvider>
<button @click="count++">Increment</button>
</div>
</template>
<style scoped>
div {
display: flex;
flex-direction: column;
padding: 20px;
gap: 16px;
}
button {
background-color: darkgreen;
color: white;
padding: 4px 16px;
border-radius: 8px;
font-size: 16px;
}
</style>vue
<script setup lang="ts">
import { useCount } from "./count-context.ts";
const value = useCount();
</script>
<template>
<p>Count: {{ value.count }}</p>
</template>
<style scoped>
p {
font-size: 24px;
}
</style>ts
import { createContext } from "@aryan02420/vue-context/util";
const {
Provider: CountProvider,
useContext: useCount
} = createContext<{ count: number }>('count');
export {
CountProvider,
useCount
};