mf-vue

Vue Mouseflow Plugin

This Vue.js plugin integrates Mouseflow analytics into Vue.js applications, providing reliable tracking of page views and user interactions, especially suited for single-page applications (SPAs) with Vue Router.

Features

• Asynchronous loading of the Mouseflow script ensuring full readiness before application interaction.
• Easy integration with any Vue.js project using Vue Router.
• SPA support to accurately track page transitions.

Installation

Install the plugin via npm:

npm install vue-mouseflow-integration

Usage

To use this plugin, import it in your main Vue.js application file and install it with Vue.use(), passing your Mouseflow websiteId as an option. Here is how to set it up to ensure the Mouseflow script is fully loaded before your Vue application mounts:

Import and Initialize Plugin

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "@/index.css";
import MouseflowPlugin from "vue-mouseflow-integration";

const app = createApp(App)
  .use(store)
  .use(router)
  .use(MouseflowPlugin, { websiteId: "YOUR_WEBSITE_ID" });

Mount App with Asynchronous Handling

Ensure that the Mouseflow plugin is fully loaded by handling the promise returned from the plugin initialization:

app.then(() => {
  app.mount("#app");
}).catch(error => {
  console.error("Failed to load Mouseflow:", error);
});

This setup ensures that the application only mounts once the Mouseflow script is fully operational, preventing any tracking issues due to asynchronous loading. Make sure to replace "YOUR_WEBSITE_ID" with the actual website ID provided by Mouseflow. This ID can be found in your Mouseflow dashboard under the installation section.

Contributing

Contributions are welcome! Please feel free to submit any issues or pull requests.