Installing Ray for Alpine.js

Alpine.js 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

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 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

View all available methods

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. Licenses purchased before Ray 3 remain valid. VAT is calculated at checkout.