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.