diff options
Diffstat (limited to 'examples/framework-alpine')
| -rw-r--r-- | examples/framework-alpine/.vscode/extensions.json | 4 | ||||
| -rw-r--r-- | examples/framework-alpine/.vscode/launch.json | 11 | ||||
| -rw-r--r-- | examples/framework-alpine/package.json | 1 | ||||
| -rw-r--r-- | examples/framework-alpine/src/components/Counter.astro | 9 | ||||
| -rw-r--r-- | examples/framework-alpine/src/pages/index.astro | 1 |
5 files changed, 23 insertions, 3 deletions
diff --git a/examples/framework-alpine/.vscode/extensions.json b/examples/framework-alpine/.vscode/extensions.json new file mode 100644 index 000000000..22a15055d --- /dev/null +++ b/examples/framework-alpine/.vscode/extensions.json @@ -0,0 +1,4 @@ +{ + "recommendations": ["astro-build.astro-vscode"], + "unwantedRecommendations": [] +} diff --git a/examples/framework-alpine/.vscode/launch.json b/examples/framework-alpine/.vscode/launch.json new file mode 100644 index 000000000..d64220976 --- /dev/null +++ b/examples/framework-alpine/.vscode/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "command": "./node_modules/.bin/astro dev", + "name": "Development server", + "request": "launch", + "type": "node-terminal" + } + ] +} diff --git a/examples/framework-alpine/package.json b/examples/framework-alpine/package.json index 679ae5f69..44e492fe3 100644 --- a/examples/framework-alpine/package.json +++ b/examples/framework-alpine/package.json @@ -9,6 +9,7 @@ "preview": "astro preview" }, "devDependencies": { + "@types/alpinejs": "^3.7.0", "astro": "^1.0.0-rc.6" }, "dependencies": { 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> |