diff options
Diffstat (limited to 'examples/framework-alpine/src')
| -rw-r--r-- | examples/framework-alpine/src/components/Counter.astro | 9 | ||||
| -rw-r--r-- | examples/framework-alpine/src/pages/index.astro | 1 |
2 files changed, 7 insertions, 3 deletions
diff --git a/examples/framework-alpine/src/components/Counter.astro b/examples/framework-alpine/src/components/Counter.astro index 4d0b62a60..0aebebb98 100644 --- a/examples/framework-alpine/src/components/Counter.astro +++ b/examples/framework-alpine/src/components/Counter.astro @@ -2,10 +2,14 @@ // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ -const { initialCount = 0 } = Astro.props; +export interface Props { + initialCount?: number; +} + +const { initialCount = 0 } = Astro.props as Props; --- -<div class="counter" x-data=`{ count: ${initialCount} }`> +<div class="counter" x-data={`{ count: ${initialCount} }`}> <button x-on:click="count--">-</button> <pre x-text="count">{ initialCount }</pre> <button x-on:click="count++">+</button> @@ -23,6 +27,7 @@ const { initialCount = 0 } = Astro.props; margin-top: 2em; place-items: center; } + .counter-message { text-align: center; } diff --git a/examples/framework-alpine/src/pages/index.astro b/examples/framework-alpine/src/pages/index.astro index 7517f3eb4..26987837d 100644 --- a/examples/framework-alpine/src/pages/index.astro +++ b/examples/framework-alpine/src/pages/index.astro @@ -25,7 +25,6 @@ import Counter from "../components/Counter.astro"; <!-- Load AlpineJS on the page --> <script> import Alpine from "alpinejs"; - window.Alpine = Alpine; Alpine.start(); </script> </head> |