Can't use @elastic/apm-rum-vue: declaration file error

[jvalrog]

So I'm trying to use this package "@elastic/apm-rum-vue" but I get that the declaration file is missing for Vue 3.

I'm using Vite btw.

Could not find a declaration file for module '@elastic/apm-rum-vue'.

I've followed the documentation but I'm missing something.

My dependencies:

"dependencies": {
    "@elastic/apm-rum-vue": "^2.1.2",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/vue-fontawesome": "^3.0.2",
    "ant-design-vue": "^3.2.15",
    "openapi-typescript-fetch": "^1.1.3",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6"
  }
"devDependencies": {
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/node": "^18.11.12",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/tsconfig": "^0.1.3",
    "autoprefixer": "^10.4.13",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "npm-run-all": "^4.1.5",
    "openapi-typescript": "^6.1.0",
    "postcss": "^8.4.20",
    "prettier": "^2.7.1",
    "tailwindcss": "^3.2.4",
    "typescript": "~4.7.4",
    "vite": "^4.0.0",
    "vue-tsc": "^1.0.12"
  }

Any help would be great, thanks.

[devcorpio]

Hi @jvalrog,

Thanks for reaching out!

The issue you are reporting is related to this issue: https://github.com/elastic/apm-agent-rum-js/issues/865. There has not been any progress on it for the moment.

On this other issue (related to angular) you can find one the strategy/workaround a user followed to solve the issue

Thanks, Alberto

[jvalrog]

Thank you @devcorpio, I'll try that path then.

[bpiaskiewicz]

Hi!

Since still nothing has changed, I'm using the following declaration file:

declare module '@elastic/apm-rum-vue' {
    import { AgentConfigOptions } from '@elastic/apm-rum';
    import { App } from 'vue';
    import { Router } from 'vue-router';

    export interface IApmVuePluginOptions {
        router?: Router;
        captureErrors?: boolean;
        config: AgentConfigOptions & {
            errorThrottleLimit?: number;
            errorThrottleInterval?: number;
            transactionThrottleLimit?: number;
            transactionThrottleInterval?: number;
            queueLimit?: number;
            monitorLongtasks?: boolean;
            apmRequest?: (
                requestParams: {
                    url: string;
                    method: string;
                    headers: string;
                    payload: any;
                    xhr: XMLHttpRequest;
                }
            ) => boolean | Promise<boolean>;
            sendCredentials?: boolean;
        };
    }

    export const ApmVuePlugin: {
        install(app: App, options: IApmVuePluginOptions): any;
    };
}

Maybe someone will find it useful

[dj1020]

@bpiaskiewicz Thanks a lot !!!!