You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/topics/alpine.md
+39-39Lines changed: 39 additions & 39 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,19 +12,19 @@ layout: topic-layout.njk
12
12
13
13
<figurestyle="width: 50%">
14
14
<img alt="Alpine logo" style="border: 0"
15
-
src="/blog/assets/alpine-logo.png?v=1.1.1">
15
+
src="/blog/assets/alpine-logo.png">
16
16
</figure>
17
17
18
18
## Overview
19
19
20
-
"[Alpine](<https://alpinejs.dev?v=1.1.1>)
20
+
"[Alpine](https://alpinejs.dev)
21
21
is a lightweight JavaScript framework that
22
22
uses custom HTML attributes to add dynamic behavior.
23
23
Alpine is notable for how easy it is to use and
24
24
how small it is compared to other web frameworks.
25
25
26
26
Alpine was created by Caleb Porzio.
27
-
He also created [Livewire](<https://laravel-livewire.com?v=1.1.1>),
27
+
He also created [Livewire](https://laravel-livewire.com),
28
28
a full stack framework for Laravel which uses PHP.
29
29
Quoting Caleb, "Alpine.js offers you the reactive and declarative nature
30
30
of big frameworks like Vue or React at a much lower cost.
@@ -63,7 +63,7 @@ Many Alpine directives have the same name suffix as a Vue directives.
63
63
64
64
## Using VS Code
65
65
66
-
The [Alpine.js IntelliSense](<https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.alpine-js-intellisense&v=1.1.1>) extension from Adrian Wilczyński provides
66
+
The [Alpine.js IntelliSense](https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.alpine-js-intellisense) extension from Adrian Wilczyński provides
67
67
intellisense and snippets for Alpine directives and magic properties.
68
68
69
69
The intellisense provides great documentation of
@@ -74,12 +74,12 @@ Useful snippets include `x-for`, `x-for-index`, `x-for-key`, and `x-if`.
74
74
Unfortunately this extension has not been updated since November 2020
75
75
and some of it is specific to version 2 of Alpine.
76
76
77
-
A more recent option that supports version 3 of Alpine is [Alpine.js IntelliSense](<https://marketplace.visualstudio.com/items?itemName=pcbowers.alpine-intellisense&v=1.1.1>) from P. Christopher Bowers.
77
+
A more recent option that supports version 3 of Alpine is [Alpine.js IntelliSense](https://marketplace.visualstudio.com/items?itemName=pcbowers.alpine-intellisense) from P. Christopher Bowers.
78
78
It was last updated in June 2022.
79
79
80
80
## Using TypeScript
81
81
82
-
To use TypeScript in an Alpine project, see [Getting started with Alpine.js and TypeScript](<https://dev.to/wtho/get-started-with-alpinejs-and-typescript-4dgf?v=1.1.1>).
82
+
To use TypeScript in an Alpine project, see [Getting started with Alpine.js and TypeScript](https://dev.to/wtho/get-started-with-alpinejs-and-typescript-4dgf).
83
83
84
84
The following steps create a new project that uses Alpine, TypeScript, and Vite.
85
85
Vite provides a local HTTP server with hot reload.
@@ -173,7 +173,7 @@ The steps to do this are as follows:
173
173
it defaults to looking in the `public` directory,
174
174
but it actual defaults to looking in the root directory
175
175
and I haven't found a way to change that.
176
-
See this [issue](<https://github.com/elysiajs/elysia/issues/352?v=1.1.1>).
176
+
See this [issue](https://github.com/elysiajs/elysia/issues/352).
177
177
178
178
1. Serve the app from any HTTP server.
179
179
@@ -230,7 +230,7 @@ before opening a page in a web browser.
230
230
231
231
On initial page load Alpine crawls the DOM looking for directive attributes and
232
232
configures everything that is needed to update the DOM when data changes.
233
-
It uses [MutationObservers](<https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver?v=1.1.1>) for this.
233
+
It uses [MutationObservers](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) for this.
234
234
235
235
### x-bind
236
236
@@ -335,7 +335,7 @@ Elements can access state properties on any of their ancestor elements.
335
335
When the same property name is used at multiple nesting levels,
336
336
the value of the nearest one is used.
337
337
338
-
From [Data-less Alpine](<https://alpinejs.dev/essentials/state#data-less-alpine?v=1.1.1>), "Sometimes you may want to use Alpine functionality,
338
+
From [Data-less Alpine](https://alpinejs.dev/essentials/state#data-less-alpine), "Sometimes you may want to use Alpine functionality,
339
339
but don't need any reactive data.
340
340
In these cases, you can opt out of passing an expression to x-data."
341
341
For example: `<div x-data>`.
@@ -945,7 +945,7 @@ For example:
945
945
946
946
It's a shame that a more terse syntax like `{{expression}}`
947
947
instead of `<span x-text="var"></span>` isn't supported.
948
-
See the `x-interpolate` directive described at [alpine-plugins](<https://github.com/mvolkmann/alpine-plugins?v=1.1.1>).
948
+
See the `x-interpolate` directive described at [alpine-plugins](https://github.com/mvolkmann/alpine-plugins).
0 commit comments