Alpine Provide Inject

Adds $provide and $inject magics. These work similar to Vue's provide/inject:

<div
  x-data="{
    outerValue: 'Outer Value'
  }"
  x-init="$provide('key', outerValue)"
>
  <div
    x-data="{
      innerValue: 'Inner Value'
    }"
    x-init="$provide('key', innerValue)"
  >
    <div x-data>
      <!-- This will show "Inner Value" -->
      <span x-text="$inject('key')"></span>
    </div>
  </div>
  <div x-data>
    <!-- This will show "Outer Value" -->
    <span x-text="$inject('key')"></span>
  </div>
</div>

Installation

Via CDN

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Via NPM

npm install alpine-provide-inject

Then initialize it from your bundle:

import Alpine from 'alpinejs'
import ProvideInject from 'alpine-provide-inject'
 
Alpine.plugin(ProvideInject)

...