# Using Ray with Vue.js

[Vue.js](https://vuejs.org/) is a progressive JavaScript framework for building user interfaces. Use Ray to help you debug when developing Vue.js applications and components.

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

## Installing the package

```
npm install vue-ray
```

```
yarn add vue-ray
```

## Installing the plugin

### Vue 3

```
import { createApp } from 'vue';
import App from './App.vue';
import RayPlugin from 'vue-ray';

const app = createApp(App);

app.use(RayPlugin);

app.mount('#app');
```

### Vue 2

```
import Vue from 'vue';
import RayPlugin from 'vue-ray';

Vue.use(RayPlugin);
```

Once the plugin is installed, you can access the helper function as `this.$ray()` from within your Vue components.

```
<script>
export default {
    methods: {
        sendToRay() {
            this.$ray('Hello from Vue!');
        }
    }
}
</script>
```

## Usage

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

> ## What's next?
> Now that Ray is installed in your Vue.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  
  
[Buy Ray for\  
434 NOK](https://spatie.be/products/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

The free trial lets you send up to 20 messages per session.