Quick Start

Verify that Spruce has been installed correctly.

You can use the following code to check that Spruce has been installed correctly.

HTML

<div x-data>
<div x-show="$store.modal.open === 'login'">
<p>
This "login" modal isn't built with a11y in mind, don't actually use it
</p>
</div>
</div>
<div x-data>
<div x-show="$store.modal.open === 'register'">
<p>
This "register" modal isn't built with a11y in mind, don't actually use it
</p>
</div>
</div>
<div x-data>
<select x-model="$store.modal.open">
<option value="login" selected>login</option>
<option value="register">register</option>
</select>
</div>

JavaScript

window.Spruce.store('modal', {
open: 'login',
});

Result

Use this CodePen to compare your outcome against the correct result.