🌲
Spruce
  • Introduction
  • Installation
  • Quick Start
  • The Essentials
  • Stores
  • Watchers
  • Persistence
  • Advanced
    • Hooks
  • Examples
    • Global Toast System
  • More
    • GitHub
    • Funding
    • Security
    • License
Powered by GitBook
On this page
  • HTML
  • JavaScript
  • Result

Was this helpful?

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

PreviousInstallationNextStores

Last updated 4 years ago

Was this helpful?

Use to compare your outcome against the correct result.

this CodePen