--- order: 1 title: Installation --- # Installation There are 2 ways to include Alpine into your project: * Including it from a ` ... ``` > Don't forget the "defer" attribute in the ` ``` That's it! Alpine is now available for use inside your page. Note that you will still need to define a component with `x-data` in order for any Alpine.js attributes to work. See for more information. ## As a module If you prefer the more robust approach, you can install Alpine via NPM and import it into a bundle. Run the following command to install it. ```shell npm install alpinejs ``` Now import Alpine into your bundle and initialize it like so: ```js import Alpine from 'alpinejs' window.Alpine = Alpine Alpine.start() ``` > The `window.Alpine = Alpine` bit is optional, but is nice to have for freedom and flexibility. Like when tinkering with Alpine from the devtools for example. > If you imported Alpine into a bundle, you have to make sure you are registering any extension code IN BETWEEN when you import the `Alpine` global object, and when you initialize Alpine by calling `Alpine.start()`. > Ensure that `Alpine.start()` is only called once per page. Calling it more than once will result in multiple "instances" of Alpine running at the same time. [→ Read more about extending Alpine](/advanced/extending)