vue-di-helper

Installation

npm i vue-di-helper
# OR
yarn add vue-di-helper
# OR
pnpm add vue-di-helper

Usage

STEP 1: Create Service

import { Ref, ref } from "vue";

export class SomeService {
  // ...

  count: Ref<number>;

  constructor() {
    this.count = ref(0);
  }

  increase = () => {
    this.count.value++;
  };

  // ...
}

STEP2: provide in parent

<template></template>

<script setup lang="ts">
//...
import { provide } from "vue-di-helper";

import { SomeService } from "path/to/some.service.ts";

provide(SomeService);
//...
</script>

STEP3: inject in children

import { inject } from "vue-di-helper";

import SomeService from "./some.service.ts";

const someService = inject(SomeService);