Vue.js Integration Guide

​

Integrate Bugster SDK with Vue.js

This guide will help you integrate Bugster SDK into your Vue.js project and start using its automated testing capabilities.

​

Prerequisites

Before getting started, ensure you have:

• A Vue.js project set up (version 3.0 or later)
• Node.js and npm installed
• A Bugster account with an API key

​

Step 1: Install the Bugster SDK

Install Bugster SDK using your package manager:

npm i @bugster/bugster-js

​

Step 2: Activate your plugin

Create a Bugster plugin to make the SDK accessible globally across your Vue application.

Create a new file src/plugins/bugsterPlugin.js with the following content:

// src/plugins/bugsterPlugin.js
import { BugsterTracker } from '@bugster/bugster-js';

const bugsterPlugin = {
  install(app, options) {
    // Initialize BugsterTracker
    const bugster = new BugsterTracker({
      apiKey: options.apiKey || 'YOUR_API_KEY',
      endpoint: "https://i.bugster.app",
    });

    // Add the Bugster instance to the app's global context
    app.config.globalProperties.$bugster = bugster;

    // Optional: the tracker can also be provided for injection elsewhere
    app.provide('bugster', bugster);
  },
};

export default bugsterPlugin;

​

Step 3: Initialize the Bugster Plugin

In your main Vue application file (usually main.js or main.ts), initialize the Bugster plugin:

import { createApp } from 'vue';
import App from './App.vue';
import bugsterPlugin from './plugins/bugsterPlugin';

const app = createApp(App);
 
app.use(bugsterPlugin, {
  apiKey: 'YOUR_API_KEY',
  endpoint: "https://i.bugster.app",
});

app.mount('#app');

​

Conclusion

You’ve now successfully integrated Bugster SDK into your Vue.js application. This integration allows you to capture user interactions, generate automated tests, and improve the overall quality of your Vue app.

For more advanced usage and configuration options, refer to the Bugster SDK API Reference and the Advanced Configuration Guide.

If you encounter any issues or have questions, don’t hesitate to contact our support team.