nuxt-di v0.1.4

Nuxt DI

A Nuxt 3 module that adds Inversion of Control (IoC) and Dependency Injection (DI) support using the Awilix library. It simplifies dependency management and helps structure code.

Features

• Automatic Dependency Loading: Configure and load services dynamically.
• Class Registration: Register services as classes, supporting constructor-based DI.
• Composables Integration: Inject services directly into your components or composables.
• Lightweight Decorators: Simplify dependency injection in classes.
• Nuxt Native Support: Fully compatible with Nuxt's auto-import and plugin ecosystem.

Installation

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-di

and add it to your nuxt.config.ts file:

import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  modules: ['nuxt-di'],
  nuxtDi: {
    containerPath: '~/container' // Optionally add path to your container configuration
  }
});

Create the ~/container.ts file:

import { $MyService } from '~/symbol';
import MyService from '~/services/myService';

export default ({ registerClass }: any): void => {
  registerClass($MyService, MyService);
};

That's it! You can now use Nuxt DI in your Nuxt app ✨

Usage

<template>
  <div class="home-page">
    <p>{{ url }}</p>
    <p>{{ user }}</p>
    <p>{{ userName }}</p>
  </div>
</template>

<script setup lang="ts">
  import { $MyService } from '~/symbol';
  import UserService from '~/services/userService';

  const userService = useContainer<UserService>('userService');
  const userName = userService.userName;

  const container = useContainer();
  const myService = container.resolve($MyService);
  const url = myService.apiUrl;
  const user = myService.user;
</script>

License

MIT