michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit Alpinejs content generation for Docs (#4466)

Browse source 
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
This commit is contained in:
Mark Spratt 2022-08-26 06:14:40 -07:00 committed by GitHub
parent ba697da4c2
commit 7efbda97af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/integrations/alpinejs/README.md
View file

@ -25,7 +25,7 @@ yarn astro add alpinejs
pnpm astro add alpinejs pnpm astro add alpinejs
``` ```
Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro. Finally, in the terminal window running Astro, press `CTRL+C` and then type `npm run astro dev` to restart the dev server.
### Manual Install ### Manual Install
@ -35,7 +35,7 @@ First, install the `@astrojs/alpinejs` package using your package manager. If yo
npm install @astrojs/alpinejs npm install @astrojs/alpinejs
``` ```
Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'alpinejs'" (or similar) warning when you start up Astro, you'll need to install Alpine.js yourself: Most package managers will install associated peer dependencies as well. However, if you see a "Cannot find package 'alpinejs'" (or similar) warning when you start up Astro, you'll need to manually install Alpine.js yourself:
```sh ```sh
npm install alpinejs @types/alpinejs npm install alpinejs @types/alpinejs
@ -43,9 +43,8 @@ npm install alpinejs @types/alpinejs
Then, apply this integration to your `astro.config.*` file using the `integrations` property: Then, apply this integration to your `astro.config.*` file using the `integrations` property:
__`astro.config.mjs`__
```js ```js title="astro.config.mjs" ins={2} "alpine()"
import { defineConfig } from 'astro/config'; import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs'; import alpine from '@astrojs/alpinejs';
@ -59,7 +58,7 @@ Finally, restart the dev server.
## Usage ## Usage
Once the integration is installed, you can use [Alpine.js](https://alpinejs.dev/) directivers and syntax inside any Astro component. The Alpine.js script is automatically added and enabled on every page of your website. Once the integration is installed, you can use [Alpine.js](https://alpinejs.dev/) directives and syntax inside any Astro component. The Alpine.js script is automatically added and enabled on every page of your website.
Check our [Astro Integration Documentation][astro-integration] for more on integrations. Check our [Astro Integration Documentation][astro-integration] for more on integrations.
@ -69,7 +68,7 @@ The Apline.js integration does not give you control over how the script is loade
**It is not currently possible to [extend Alpine.js](https://alpinejs.dev/advanced/extending) when using this component.** If you need this feature, consider following [the manual Alpine.js setup](https://alpinejs.dev/essentials/installation) instead using an Astro script tag: **It is not currently possible to [extend Alpine.js](https://alpinejs.dev/advanced/extending) when using this component.** If you need this feature, consider following [the manual Alpine.js setup](https://alpinejs.dev/essentials/installation) instead using an Astro script tag:
```astro ```astro title="src/pages/index.astro"
<!-- Example: Load AlpineJS on a single page. --> <!-- Example: Load AlpineJS on a single page. -->
<script> <script>
import Alpine from 'alpinejs'; import Alpine from 'alpinejs';