# Installing Ray for Alpine.js

[Alpine.js](https://alpinejs.dev/) is a lightweight JavaScript framework for composing behavior directly in your markup. Use Ray to help you debug when developing Alpine.js applications and components.

[permafrost-dev/alpinejs-ray](https://github.com/permafrost-dev/alpinejs-ray)

## Installation via CDN

The preferred way to use this package is to load it via a CDN. You'll need to load the `axios` library as well.

For Alpine version 2:

```
<script src="https://cdn.jsdelivr.net/npm/axios@latest/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs-ray@2/dist/standalone.min.js"></script>

<!-- load alpine.js here -->
```

For Alpine version 3:

```
<script src="https://cdn.jsdelivr.net/npm/axios@latest/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs-ray@2/dist/standalone.min.js"></script>
```

You can also configure aspects of Alpine by creating a config object before loading the Alpine Ray library:

```
<script>
    window.alpineRayConfig = {
        logComponentsInit: true,
        logErrors: true,
        logEvents: ['abc'],
    };
</script>

<!-- load axios and alpinejs-ray -->
```

## Installation with package manager

```
npm install alpinejs-ray
```

```
yarn add alpinejs-ray
```

## Importing the plugin

If installed with a package manager, import the package along with `alpinejs` and `axios`:

```
import Alpine from 'alpinejs';
import AlpineRayPlugin from 'alpinejs-ray';

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.Alpine = Alpine;

Alpine.plugin(AlpineRayPlugin);
Alpine.start();
```

Once installed, you can use `$ray()` within your Alpine components:

```
<div x-data="{ count: 0 }">
    <button @click="count++; $ray(count)">
        Increment
    </button>
</div>
```

## Usage

All [JavaScript methods](/content/docs/javascript/vanilla-javascript/usage/index.html) are available when using Alpine.js.

> ## What's next?
>
> Now that Ray is installed in your Alpine.js project, see what you can use it for.
>
> - [Learn how to use Ray with JavaScript](/content/docs/javascript/vanilla-javascript/usage/index.html)
> - [View all available methods](/content/docs/javascript/vanilla-javascript/reference/index.html)

## Debug without breaking your flow

Ray keeps all your debug output neatly organized in a dedicated desktop app.

Download Ray

Licenses are valid for 1 year and managed through [Spatie](https://spatie.be/products/ray). Licenses purchased before Ray 3 remain valid. VAT is calculated at checkout.

### Stay in the loop with updates & promotions for Ray