To include Alpine.js in your project without relying on an external CDN, you can follow these steps:
-
Download Alpine.js: Visit the Alpine.js GitHub repository (https://github.com/alpinejs/alpine) and download the latest release. You can either download the minified version or the development version, depending on your needs.
-
Store Alpine.js in your project: Once you have downloaded Alpine.js, store it in your project directory. You can create a new folder called "js" or "vendor" and place the Alpine.js file inside it.
-
Include Alpine.js in your HTML: In your HTML file, include the Alpine.js file using a script tag. Make sure to reference the correct path to the Alpine.js file based on its location in your project directory.
<script src="path/to/alpine.js"></script>
- Start using Alpine.js: With Alpine.js included in your project, you can now start using its features. You can add Alpine.js directives to your HTML elements and define behavior using JavaScript.
For example, you can add the x-data directive to an element to define its data:
<div x-data="{ count: 0 }">
<button x-on:click="count++">Increment</button>
<span x-text="count"></span>
</div>
This is a basic example that creates a counter. Whenever the button is clicked, the count variable is incremented, and the updated value is displayed in the span element.
Remember to consult the Alpine.js documentation (https://alpinejs.dev/) for more information on how to use its features and directives.
Note: The solution provided assumes you are using a static HTML file. If you are using a framework like Laravel, you may need to adjust the file paths and include the Alpine.js file in your build process or asset pipeline.