Alpine.js

Use @nanostores/alpine plugin and x-nano directive to bind stores to Alpine.js components.

import { NanoStores } from '@nanostores/alpine'
import Alpine from 'alpinejs'

import { $profile } from '../stores/profile.js'

Alpine.plugin(NanoStores)
Alpine.magic('profile', () => $profile)
Alpine.start()

<div x-data x-nano:profile="$profile">
  <header x-text="'Hi, ' + profile.name"></header>
</div>

---

Imported from the Nano Stores README for version 1.5.5. Improve this page there.