@mearie/vue 0.0.0-next-20260228035926

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright 2025 Bae Junehyeon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+# @mearie/vue
+
+Vue bindings for Mearie GraphQL client.
+
+This package provides Vue composables, plugins, and the GraphQL client runtime
+for using Mearie in Vue applications.
+
+## Installation
+
+```bash
+npm install -D mearie
+npm install @mearie/vue
+```
+
+The `mearie` package provides build-time code generation, while `@mearie/vue`
+includes the runtime client and Vue-specific composables.
+
+## Usage
+
+First, create a client and set up the plugin in your app:
+
+```typescript
+// src/main.ts
+import { createApp } from 'vue';
+import { createClient, httpExchange, cacheExchange, dedupExchange, ClientPlugin } from '@mearie/vue';
+import { schema } from '$mearie';
+import App from './App.vue';
+
+const client = createClient({
+  schema,
+  exchanges: [dedupExchange(), cacheExchange(), httpExchange({ url: 'https://api.example.com/graphql' })],
+});
+
+const app = createApp(App);
+app.use(ClientPlugin, { client });
+app.mount('#app');
+```
+
+Then use it in your components:
+
+```vue
+<!-- src/components/UserProfile.vue -->
+<script setup lang="ts">
+import { graphql } from '$mearie';
+import { useQuery } from '@mearie/vue';
+
+const props = defineProps<{ userId: string }>();
+
+const { data, loading } = useQuery(
+  graphql(`
+    query GetUser($id: ID!) {
+      user(id: $id) {
+        id
+        name
+      }
+    }
+  `),
+  () => ({ id: props.userId }),
+);
+</script>
+
+<template>
+  <div v-if="loading">Loading...</div>
+  <h1 v-else>{{ data.user.name }}</h1>
+</template>
+```
+
+## Documentation
+
+Full documentation is available at <https://mearie.dev/frameworks/vue>.

package/dist/index.cjs

@@ -0,0 +1,173 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let _mearie_core = require("@mearie/core");
+let vue = require("vue");
+let _mearie_core_stream = require("@mearie/core/stream");
+
+//#region src/client-plugin.ts
+const ClientKey = Symbol("mearie-client");
+const ClientPlugin = { install(app, options) {
+	app.provide(ClientKey, options.client);
+} };
+const useClient = () => {
+	const client = (0, vue.inject)(ClientKey);
+	if (!client) throw new Error("useClient must be used within a ClientPlugin context");
+	return client;
+};
+
+//#endregion
+//#region src/use-query.ts
+const useQuery = ((query, variables, options) => {
+	const client = useClient();
+	const initialOpts = (0, vue.toValue)(options);
+	const data = (0, vue.ref)(initialOpts?.initialData);
+	const loading = (0, vue.ref)(!initialOpts?.skip && !initialOpts?.initialData);
+	const error = (0, vue.ref)(void 0);
+	let unsubscribe = null;
+	let initialized = false;
+	const execute = () => {
+		unsubscribe?.();
+		if ((0, vue.toValue)(options)?.skip) return;
+		if (!initialized && initialOpts?.initialData) loading.value = true;
+		initialized = true;
+		error.value = void 0;
+		unsubscribe = (0, _mearie_core_stream.pipe)(client.executeQuery(query, (0, vue.toValue)(variables), (0, vue.toValue)(options)), (0, _mearie_core_stream.subscribe)({ next: (result) => {
+			if (result.errors && result.errors.length > 0) {
+				error.value = new _mearie_core.AggregatedError(result.errors);
+				loading.value = false;
+			} else {
+				data.value = result.data;
+				loading.value = false;
+				error.value = void 0;
+			}
+		} }));
+	};
+	(0, vue.watchEffect)((onCleanup) => {
+		execute();
+		onCleanup(() => {
+			unsubscribe?.();
+		});
+	});
+	return {
+		data,
+		loading,
+		error,
+		refetch: execute
+	};
+});
+
+//#endregion
+//#region src/use-subscription.ts
+const useSubscription = (subscription, ...[variables, options]) => {
+	const client = useClient();
+	const data = (0, vue.ref)(void 0);
+	const loading = (0, vue.ref)(!(0, vue.toValue)(options)?.skip);
+	const error = (0, vue.ref)(void 0);
+	let unsubscribe = null;
+	const execute = () => {
+		unsubscribe?.();
+		if ((0, vue.toValue)(options)?.skip) return;
+		loading.value = true;
+		error.value = void 0;
+		unsubscribe = (0, _mearie_core_stream.pipe)(client.executeSubscription(subscription, (0, vue.toValue)(variables), (0, vue.toValue)(options)), (0, _mearie_core_stream.subscribe)({ next: (result) => {
+			if (result.errors && result.errors.length > 0) {
+				const err = new _mearie_core.AggregatedError(result.errors);
+				error.value = err;
+				loading.value = false;
+				(0, vue.toValue)(options)?.onError?.(err);
+			} else {
+				const resultData = result.data;
+				data.value = resultData;
+				loading.value = false;
+				(0, vue.toValue)(options)?.onData?.(resultData);
+			}
+		} }));
+	};
+	(0, vue.watchEffect)((onCleanup) => {
+		execute();
+		onCleanup(() => {
+			unsubscribe?.();
+		});
+	});
+	return {
+		data,
+		loading,
+		error
+	};
+};
+
+//#endregion
+//#region src/use-mutation.ts
+const useMutation = (mutation) => {
+	const client = useClient();
+	const data = (0, vue.ref)(void 0);
+	const loading = (0, vue.ref)(false);
+	const error = (0, vue.ref)(void 0);
+	const execute = async (variables, options) => {
+		loading.value = true;
+		error.value = void 0;
+		try {
+			const result = await (0, _mearie_core_stream.pipe)(client.executeMutation(mutation, variables, options), (0, _mearie_core_stream.take)(1), _mearie_core_stream.collect);
+			if (result.errors && result.errors.length > 0) {
+				const err = new _mearie_core.AggregatedError(result.errors);
+				error.value = err;
+				loading.value = false;
+				throw err;
+			}
+			data.value = result.data;
+			loading.value = false;
+			return result.data;
+		} catch (err) {
+			if (err instanceof _mearie_core.AggregatedError) error.value = err;
+			loading.value = false;
+			throw err;
+		}
+	};
+	return [execute, {
+		data,
+		loading,
+		error
+	}];
+};
+
+//#endregion
+//#region src/use-fragment.ts
+const useFragment = ((fragment, fragmentRef, ...[options]) => {
+	const client = useClient();
+	const initialRef = (0, vue.toValue)(fragmentRef);
+	let initialData;
+	if (initialRef == null) initialData = null;
+	else {
+		const result = (0, _mearie_core_stream.pipe)(client.executeFragment(fragment, initialRef, (0, vue.toValue)(options)), _mearie_core_stream.peek);
+		if (result.data === void 0) throw new Error("Fragment data not found");
+		initialData = result.data;
+	}
+	const data = (0, vue.ref)(initialData);
+	(0, vue.watchEffect)((onCleanup) => {
+		const currentRef = (0, vue.toValue)(fragmentRef);
+		if (currentRef == null) {
+			data.value = null;
+			return;
+		}
+		const unsubscribe = (0, _mearie_core_stream.pipe)(client.executeFragment(fragment, currentRef, (0, vue.toValue)(options)), (0, _mearie_core_stream.subscribe)({ next: (result) => {
+			if (result.data !== void 0) data.value = result.data;
+		} }));
+		onCleanup(() => unsubscribe());
+	});
+	return { get data() {
+		return data.value;
+	} };
+});
+
+//#endregion
+exports.ClientPlugin = ClientPlugin;
+exports.useClient = useClient;
+exports.useFragment = useFragment;
+exports.useMutation = useMutation;
+exports.useQuery = useQuery;
+exports.useSubscription = useSubscription;
+Object.keys(_mearie_core).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return _mearie_core[k]; }
+  });
+});

package/dist/index.d.cts

@@ -0,0 +1,115 @@
+import { AggregatedError, Artifact, Client, DataOf, FragmentOptions, FragmentRefs, MutationOptions, QueryOptions, SchemaMeta, SubscriptionOptions, VariablesOf } from "@mearie/core";
+import { App, MaybeRefOrGetter, Ref } from "vue";
+export * from "@mearie/core";
+
+//#region src/client-plugin.d.ts
+type ClientPluginOptions<TMeta extends SchemaMeta = SchemaMeta> = {
+  client: Client<TMeta>;
+};
+declare const ClientPlugin: {
+  install<TMeta extends SchemaMeta = SchemaMeta>(app: App, options: ClientPluginOptions<TMeta>): void;
+};
+declare const useClient: <TMeta extends SchemaMeta = SchemaMeta>() => Client<TMeta>;
+//#endregion
+//#region src/use-query.d.ts
+type UseQueryOptions<T extends Artifact<'query'> = Artifact<'query'>> = QueryOptions<T> & {
+  skip?: boolean;
+};
+type Query<T extends Artifact<'query'>> = {
+  data: Ref<undefined>;
+  loading: Ref<true>;
+  error: Ref<undefined>;
+  refetch: () => void;
+} | {
+  data: Ref<DataOf<T>>;
+  loading: Ref<false>;
+  error: Ref<undefined>;
+  refetch: () => void;
+} | {
+  data: Ref<DataOf<T> | undefined>;
+  loading: Ref<false>;
+  error: Ref<AggregatedError>;
+  refetch: () => void;
+};
+type DefinedQuery<T extends Artifact<'query'>> = {
+  data: Ref<DataOf<T>>;
+  loading: Ref<true>;
+  error: Ref<undefined>;
+  refetch: () => void;
+} | {
+  data: Ref<DataOf<T>>;
+  loading: Ref<false>;
+  error: Ref<undefined>;
+  refetch: () => void;
+} | {
+  data: Ref<DataOf<T>>;
+  loading: Ref<false>;
+  error: Ref<AggregatedError>;
+  refetch: () => void;
+};
+type UseQueryFn = {
+  <T extends Artifact<'query'>>(query: T, variables: MaybeRefOrGetter<VariablesOf<T>> | undefined, options: MaybeRefOrGetter<UseQueryOptions<T> & {
+    initialData: DataOf<T>;
+  }>): DefinedQuery<T>;
+  <T extends Artifact<'query'>>(query: T, ...[variables, options]: VariablesOf<T> extends Record<string, never> ? [undefined?, MaybeRefOrGetter<UseQueryOptions<T>>?] : [MaybeRefOrGetter<VariablesOf<T>>, MaybeRefOrGetter<UseQueryOptions<T>>?]): Query<T>;
+};
+declare const useQuery: UseQueryFn;
+//#endregion
+//#region src/use-subscription.d.ts
+type Subscription<T extends Artifact<'subscription'>> = {
+  data: Ref<undefined>;
+  loading: Ref<true>;
+  error: Ref<undefined>;
+} | {
+  data: Ref<DataOf<T> | undefined>;
+  loading: Ref<false>;
+  error: Ref<undefined>;
+} | {
+  data: Ref<DataOf<T> | undefined>;
+  loading: Ref<false>;
+  error: Ref<AggregatedError>;
+};
+type UseSubscriptionOptions<T extends Artifact<'subscription'>> = SubscriptionOptions & {
+  skip?: boolean;
+  onData?: (data: DataOf<T>) => void;
+  onError?: (error: AggregatedError) => void;
+};
+declare const useSubscription: <T extends Artifact<"subscription">>(subscription: T, ...[variables, options]: VariablesOf<T> extends Record<string, never> ? [undefined?, MaybeRefOrGetter<UseSubscriptionOptions<T>>?] : [MaybeRefOrGetter<VariablesOf<T>>, MaybeRefOrGetter<UseSubscriptionOptions<T>>?]) => Subscription<T>;
+//#endregion
+//#region src/use-mutation.d.ts
+type MutationResult<T extends Artifact<'mutation'>> = {
+  data: Ref<undefined>;
+  loading: Ref<true>;
+  error: Ref<undefined>;
+} | {
+  data: Ref<DataOf<T> | undefined>;
+  loading: Ref<false>;
+  error: Ref<undefined>;
+} | {
+  data: Ref<DataOf<T> | undefined>;
+  loading: Ref<false>;
+  error: Ref<AggregatedError>;
+};
+type UseMutationOptions = MutationOptions;
+type Mutation<T extends Artifact<'mutation'>> = [(...[variables, options]: VariablesOf<T> extends Record<string, never> ? [undefined?, UseMutationOptions?] : [VariablesOf<T>, UseMutationOptions?]) => Promise<DataOf<T>>, MutationResult<T>];
+declare const useMutation: <T extends Artifact<"mutation">>(mutation: T) => Mutation<T>;
+//#endregion
+//#region src/use-fragment.d.ts
+type UseFragmentOptions = FragmentOptions;
+type Fragment<T extends Artifact<'fragment'>> = {
+  data: DataOf<T>;
+};
+type FragmentList<T extends Artifact<'fragment'>> = {
+  data: DataOf<T>[];
+};
+type OptionalFragment<T extends Artifact<'fragment'>> = {
+  data: DataOf<T> | null;
+};
+type UseFragmentFn = {
+  <T extends Artifact<'fragment'>>(fragment: T, fragmentRef: MaybeRefOrGetter<FragmentRefs<T['name']>[]>, ...options: [MaybeRefOrGetter<UseFragmentOptions>?]): FragmentList<T>;
+  <T extends Artifact<'fragment'>>(fragment: T, fragmentRef: MaybeRefOrGetter<FragmentRefs<T['name']>>, ...options: [MaybeRefOrGetter<UseFragmentOptions>?]): Fragment<T>;
+  <T extends Artifact<'fragment'>>(fragment: T, fragmentRef: MaybeRefOrGetter<FragmentRefs<T['name']> | null | undefined>, ...options: [MaybeRefOrGetter<UseFragmentOptions>?]): OptionalFragment<T>;
+};
+declare const useFragment: UseFragmentFn;
+//#endregion
+export { ClientPlugin, type ClientPluginOptions, type DefinedQuery, type Fragment, type FragmentList, type Mutation, type OptionalFragment, type Query, type Subscription, type UseFragmentOptions, type UseMutationOptions, type UseQueryOptions, type UseSubscriptionOptions, useClient, useFragment, useMutation, useQuery, useSubscription };

package/dist/index.d.mts

@@ -0,0 +1,115 @@
+import { AggregatedError, Artifact, Client, DataOf, FragmentOptions, FragmentRefs, MutationOptions, QueryOptions, SchemaMeta, SubscriptionOptions, VariablesOf } from "@mearie/core";
+import { App, MaybeRefOrGetter, Ref } from "vue";
+export * from "@mearie/core";
+
+//#region src/client-plugin.d.ts
+type ClientPluginOptions<TMeta extends SchemaMeta = SchemaMeta> = {
+  client: Client<TMeta>;
+};
+declare const ClientPlugin: {
+  install<TMeta extends SchemaMeta = SchemaMeta>(app: App, options: ClientPluginOptions<TMeta>): void;
+};
+declare const useClient: <TMeta extends SchemaMeta = SchemaMeta>() => Client<TMeta>;
+//#endregion
+//#region src/use-query.d.ts
+type UseQueryOptions<T extends Artifact<'query'> = Artifact<'query'>> = QueryOptions<T> & {
+  skip?: boolean;
+};
+type Query<T extends Artifact<'query'>> = {
+  data: Ref<undefined>;
+  loading: Ref<true>;
+  error: Ref<undefined>;
+  refetch: () => void;
+} | {
+  data: Ref<DataOf<T>>;
+  loading: Ref<false>;
+  error: Ref<undefined>;
+  refetch: () => void;
+} | {
+  data: Ref<DataOf<T> | undefined>;
+  loading: Ref<false>;
+  error: Ref<AggregatedError>;
+  refetch: () => void;
+};
+type DefinedQuery<T extends Artifact<'query'>> = {
+  data: Ref<DataOf<T>>;
+  loading: Ref<true>;
+  error: Ref<undefined>;
+  refetch: () => void;
+} | {
+  data: Ref<DataOf<T>>;
+  loading: Ref<false>;
+  error: Ref<undefined>;
+  refetch: () => void;
+} | {
+  data: Ref<DataOf<T>>;
+  loading: Ref<false>;
+  error: Ref<AggregatedError>;
+  refetch: () => void;
+};
+type UseQueryFn = {
+  <T extends Artifact<'query'>>(query: T, variables: MaybeRefOrGetter<VariablesOf<T>> | undefined, options: MaybeRefOrGetter<UseQueryOptions<T> & {
+    initialData: DataOf<T>;
+  }>): DefinedQuery<T>;
+  <T extends Artifact<'query'>>(query: T, ...[variables, options]: VariablesOf<T> extends Record<string, never> ? [undefined?, MaybeRefOrGetter<UseQueryOptions<T>>?] : [MaybeRefOrGetter<VariablesOf<T>>, MaybeRefOrGetter<UseQueryOptions<T>>?]): Query<T>;
+};
+declare const useQuery: UseQueryFn;
+//#endregion
+//#region src/use-subscription.d.ts
+type Subscription<T extends Artifact<'subscription'>> = {
+  data: Ref<undefined>;
+  loading: Ref<true>;
+  error: Ref<undefined>;
+} | {
+  data: Ref<DataOf<T> | undefined>;
+  loading: Ref<false>;
+  error: Ref<undefined>;
+} | {
+  data: Ref<DataOf<T> | undefined>;
+  loading: Ref<false>;
+  error: Ref<AggregatedError>;
+};
+type UseSubscriptionOptions<T extends Artifact<'subscription'>> = SubscriptionOptions & {
+  skip?: boolean;
+  onData?: (data: DataOf<T>) => void;
+  onError?: (error: AggregatedError) => void;
+};
+declare const useSubscription: <T extends Artifact<"subscription">>(subscription: T, ...[variables, options]: VariablesOf<T> extends Record<string, never> ? [undefined?, MaybeRefOrGetter<UseSubscriptionOptions<T>>?] : [MaybeRefOrGetter<VariablesOf<T>>, MaybeRefOrGetter<UseSubscriptionOptions<T>>?]) => Subscription<T>;
+//#endregion
+//#region src/use-mutation.d.ts
+type MutationResult<T extends Artifact<'mutation'>> = {
+  data: Ref<undefined>;
+  loading: Ref<true>;
+  error: Ref<undefined>;
+} | {
+  data: Ref<DataOf<T> | undefined>;
+  loading: Ref<false>;
+  error: Ref<undefined>;
+} | {
+  data: Ref<DataOf<T> | undefined>;
+  loading: Ref<false>;
+  error: Ref<AggregatedError>;
+};
+type UseMutationOptions = MutationOptions;
+type Mutation<T extends Artifact<'mutation'>> = [(...[variables, options]: VariablesOf<T> extends Record<string, never> ? [undefined?, UseMutationOptions?] : [VariablesOf<T>, UseMutationOptions?]) => Promise<DataOf<T>>, MutationResult<T>];
+declare const useMutation: <T extends Artifact<"mutation">>(mutation: T) => Mutation<T>;
+//#endregion
+//#region src/use-fragment.d.ts
+type UseFragmentOptions = FragmentOptions;
+type Fragment<T extends Artifact<'fragment'>> = {
+  data: DataOf<T>;
+};
+type FragmentList<T extends Artifact<'fragment'>> = {
+  data: DataOf<T>[];
+};
+type OptionalFragment<T extends Artifact<'fragment'>> = {
+  data: DataOf<T> | null;
+};
+type UseFragmentFn = {
+  <T extends Artifact<'fragment'>>(fragment: T, fragmentRef: MaybeRefOrGetter<FragmentRefs<T['name']>[]>, ...options: [MaybeRefOrGetter<UseFragmentOptions>?]): FragmentList<T>;
+  <T extends Artifact<'fragment'>>(fragment: T, fragmentRef: MaybeRefOrGetter<FragmentRefs<T['name']>>, ...options: [MaybeRefOrGetter<UseFragmentOptions>?]): Fragment<T>;
+  <T extends Artifact<'fragment'>>(fragment: T, fragmentRef: MaybeRefOrGetter<FragmentRefs<T['name']> | null | undefined>, ...options: [MaybeRefOrGetter<UseFragmentOptions>?]): OptionalFragment<T>;
+};
+declare const useFragment: UseFragmentFn;
+//#endregion
+export { ClientPlugin, type ClientPluginOptions, type DefinedQuery, type Fragment, type FragmentList, type Mutation, type OptionalFragment, type Query, type Subscription, type UseFragmentOptions, type UseMutationOptions, type UseQueryOptions, type UseSubscriptionOptions, useClient, useFragment, useMutation, useQuery, useSubscription };

package/dist/index.mjs

@@ -0,0 +1,163 @@
+import { AggregatedError } from "@mearie/core";
+import { inject, ref, toValue, watchEffect } from "vue";
+import { collect, peek, pipe, subscribe, take } from "@mearie/core/stream";
+
+export * from "@mearie/core"
+
+//#region src/client-plugin.ts
+const ClientKey = Symbol("mearie-client");
+const ClientPlugin = { install(app, options) {
+	app.provide(ClientKey, options.client);
+} };
+const useClient = () => {
+	const client = inject(ClientKey);
+	if (!client) throw new Error("useClient must be used within a ClientPlugin context");
+	return client;
+};
+
+//#endregion
+//#region src/use-query.ts
+const useQuery = ((query, variables, options) => {
+	const client = useClient();
+	const initialOpts = toValue(options);
+	const data = ref(initialOpts?.initialData);
+	const loading = ref(!initialOpts?.skip && !initialOpts?.initialData);
+	const error = ref(void 0);
+	let unsubscribe = null;
+	let initialized = false;
+	const execute = () => {
+		unsubscribe?.();
+		if (toValue(options)?.skip) return;
+		if (!initialized && initialOpts?.initialData) loading.value = true;
+		initialized = true;
+		error.value = void 0;
+		unsubscribe = pipe(client.executeQuery(query, toValue(variables), toValue(options)), subscribe({ next: (result) => {
+			if (result.errors && result.errors.length > 0) {
+				error.value = new AggregatedError(result.errors);
+				loading.value = false;
+			} else {
+				data.value = result.data;
+				loading.value = false;
+				error.value = void 0;
+			}
+		} }));
+	};
+	watchEffect((onCleanup) => {
+		execute();
+		onCleanup(() => {
+			unsubscribe?.();
+		});
+	});
+	return {
+		data,
+		loading,
+		error,
+		refetch: execute
+	};
+});
+
+//#endregion
+//#region src/use-subscription.ts
+const useSubscription = (subscription, ...[variables, options]) => {
+	const client = useClient();
+	const data = ref(void 0);
+	const loading = ref(!toValue(options)?.skip);
+	const error = ref(void 0);
+	let unsubscribe = null;
+	const execute = () => {
+		unsubscribe?.();
+		if (toValue(options)?.skip) return;
+		loading.value = true;
+		error.value = void 0;
+		unsubscribe = pipe(client.executeSubscription(subscription, toValue(variables), toValue(options)), subscribe({ next: (result) => {
+			if (result.errors && result.errors.length > 0) {
+				const err = new AggregatedError(result.errors);
+				error.value = err;
+				loading.value = false;
+				toValue(options)?.onError?.(err);
+			} else {
+				const resultData = result.data;
+				data.value = resultData;
+				loading.value = false;
+				toValue(options)?.onData?.(resultData);
+			}
+		} }));
+	};
+	watchEffect((onCleanup) => {
+		execute();
+		onCleanup(() => {
+			unsubscribe?.();
+		});
+	});
+	return {
+		data,
+		loading,
+		error
+	};
+};
+
+//#endregion
+//#region src/use-mutation.ts
+const useMutation = (mutation) => {
+	const client = useClient();
+	const data = ref(void 0);
+	const loading = ref(false);
+	const error = ref(void 0);
+	const execute = async (variables, options) => {
+		loading.value = true;
+		error.value = void 0;
+		try {
+			const result = await pipe(client.executeMutation(mutation, variables, options), take(1), collect);
+			if (result.errors && result.errors.length > 0) {
+				const err = new AggregatedError(result.errors);
+				error.value = err;
+				loading.value = false;
+				throw err;
+			}
+			data.value = result.data;
+			loading.value = false;
+			return result.data;
+		} catch (err) {
+			if (err instanceof AggregatedError) error.value = err;
+			loading.value = false;
+			throw err;
+		}
+	};
+	return [execute, {
+		data,
+		loading,
+		error
+	}];
+};
+
+//#endregion
+//#region src/use-fragment.ts
+const useFragment = ((fragment, fragmentRef, ...[options]) => {
+	const client = useClient();
+	const initialRef = toValue(fragmentRef);
+	let initialData;
+	if (initialRef == null) initialData = null;
+	else {
+		const result = pipe(client.executeFragment(fragment, initialRef, toValue(options)), peek);
+		if (result.data === void 0) throw new Error("Fragment data not found");
+		initialData = result.data;
+	}
+	const data = ref(initialData);
+	watchEffect((onCleanup) => {
+		const currentRef = toValue(fragmentRef);
+		if (currentRef == null) {
+			data.value = null;
+			return;
+		}
+		const unsubscribe = pipe(client.executeFragment(fragment, currentRef, toValue(options)), subscribe({ next: (result) => {
+			if (result.data !== void 0) data.value = result.data;
+		} }));
+		onCleanup(() => unsubscribe());
+	});
+	return { get data() {
+		return data.value;
+	} };
+});
+
+//#endregion
+export { ClientPlugin, useClient, useFragment, useMutation, useQuery, useSubscription };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@mearie/vue",
+  "version": "0.0.0-next-20260228035926",
+  "description": "Type-safe, zero-overhead GraphQL client",
+  "keywords": [
+    "graphql",
+    "graphql-client",
+    "typescript",
+    "codegen",
+    "cache"
+  ],
+  "homepage": "https://github.com/devunt/mearie#readme",
+  "bugs": {
+    "url": "https://github.com/devunt/mearie/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devunt/mearie.git",
+    "directory": "packages/vue"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/devunt"
+  },
+  "license": "MIT",
+  "author": "Bae Junehyeon <finn@penxle.io>",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "dependencies": {
+    "@mearie/core": "0.0.0-next-20260228035926"
+  },
+  "devDependencies": {
+    "tsdown": "^0.20.3",
+    "typescript": "^5.9.3",
+    "vue": "^3.5.29"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "engines": {
+    "bun": ">=1.2.0",
+    "deno": ">=2.2.0",
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts"
+}