"Vue.js integrates seamlessly with Tracking.js for advanced tracking

Has anyone successfully integrated the tracking.js library into a vueJS application?

I followed these steps to install the package:

npm install --save tracking

After that, I defined the library in my main.js file like this:

import tracking from 'tracking'
Object.defineProperty(Vue.prototype, '$tracking', { value: tracking });

In my component, I attempted to use the library with the following code:

mounted() {
  var tracker = new this.$tracking.ObjectTracker('webcam');
}

However, when I run it, I get the error message:

TypeError: this.$tracking.ObjectTracker is not a constructor

javascriptvue.jsnpmtracking.js

Answer №1

The issue lies within the import statement, as it appears that trackingjs does not fully support ES6 imports. It is necessary to include it in a more global scope.

Object.defineProperty(Vue.prototype, '$tracking', { value: tracking });

new Vue({
  created: function() {
   var tracker = new this.$tracking.Tracker()
  console.log(tracker)
  }
})

In this JSFiddle example, everything works as intended. Just remember to add it as a dependency using 

<script src="path/to/trackingjs">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty accessing node_modules directory in JavaScript

I am confused about how to access node_modules for JavaScript. Can someone provide an example of calling module.exports from a node_module folder after installing a package with NPM in Node.js? File tree structure: There is a folder named 'ethereum&a ...

javascriptnode.jsnpmnpm-installnode-modules

Specify the return type based on specific parameter value

I'm facing a situation where I have two definitions that are identical, but I need them to behave differently based on the value of the limit parameter. Specifically, I want the first definition to return Promise<Cursor<T>> when limit is g ...

javascripttypescripttypescript-typings

Determine whether a div contains any child elements

I am working on a piece of code that checks for the presence of the class "wrong" in any of my divs, and if found, displays a jQuery UI dialog box. My goal now is to enhance this code by adding a condition where it also checks for empty divs before showing ...

javascriptjqueryhtmlcss

Utilizing Jquery select2 to enhance user experience by organizing JSON data with optgroup and

Currently, I am working with select2 in conjunction with spring mvc. The data I need to display is retrieved from my controller and should be displayed as options. However, I would like these options to be grouped within optgroups while also incorporating ...

javascriptjqueryjquery-select2

What is the method for conducting an Ajax request?

Currently, I am deeply involved in a personal project to enhance my skills with Rails. The project involves developing a task management application that encompasses three primary states: todo, in progress, and done. After numerous days of trial and error, ...

javascriptruby-on-railsajaxruby-on-rails-5

Issue with making a call to retrieve an image from a different directory in ReactJS

This is how it appears <img className='imgclass' src={"../" + require(aLc.value)} alt='' key={aLc.value} /> I am trying to create a path like ../m/b/image.jpg, where aLc.value contains the path /m/b/image.jpg. I need to add only ...

javascripthtmlcssreactjswebpack

npm package live-server Vulnerability

Greetings everyone, I have just upgraded to Fedora 35 and installed Node.js along with npm. However, I encountered an error message while installing live-server indicating "2 high severity vulnerabilities". Has anyone else experienced this issue and if s ...

npmfedora

Description for script tag in HTML body

How can I embed a GitHub gist on my website using the script tag? I currently use the following code: <script src="https://gist.github.com/uname/id.js"></script> I've been wondering if there is a way to add alt text in case the gist fail ...

javascripthtml

Is It Possible to Extract a Hidden Document Value from a Web Browser Using IWebBrowser2 in LabVIEW?

After hours of combing through the internet, I've come up empty-handed in my quest to find information related to my current project. I've created an HTML document that gathers user data and stores it in a JavaScript array. This array is then com ...

javascript.netformslabview

Contrasting actions observed when employing drag functionality with arrays of numbers versus arrays of objects

Being a newcomer to D3 and JavaScript, I'm hoping someone can help me clarify this simple point. I am creating a scatter graph with draggable points using code that closely resembles the solution provided in this Stack Overflow question. When I const ...

javascriptd3.js

Guide on setting up @types from an NPM module containing the "@" symbol in its title

Installing the node package is easy npm install @gamestdio/timer --save But when attempting to add the corresponding types npm install @types/@gamestdio/timer --save An error occurs Invalid package name "@types/": name can only include URL-friendly ch ...

node.jstypescriptnpm

Seeking assistance to prevent data duplication when transferring information from list1 to list2 in React.js

As I work on developing two lists in React.js, I encountered an issue with avoiding repetitions when transferring items from list-1 to list-2. I need assistance creating a function that prevents duplicate items in list-2 while also ensuring that the items ...

javascriptreactjsreact-functional-component

HTML5 Dragend event failed to trigger in Firefox

While working on my project, I encountered an issue where the 'dragend' event is not fired in Firefox 22.0 on Ubuntu but works perfectly fine in Chrome. I have written a logic to make changes on drag start and revert them if drop fails, triggered ...

javascriptjqueryhtmldrag-and-drop

Unable to get HTML text input validation with RegEx to function, despite incorporating the required attribute

I am attempting to create dynamically generated text inputs that only allow for digits and an optional decimal point. I have added the required attribute but the inputs are not responding to the RegEx pattern. var howMuch = $("<input>").attr("type", ...

javascriptregexhtml

How to efficiently transfer data between Node and Angular 7 using Electron

After setting up an Angular 7 application running on http://localhost:4200, I developed a Node JS application responsible for authenticating users on Facebook, accessible at http://localhost:3000. The callback redirection functions correctly within the No ...

javascriptnode.jsangularelectron

There was a serious issue: The mark-compacts were not working effectively near the heap limit, resulting in allocation failure - the JavaScript heap ran out of memory during the

I recently set up a t2.micro server on AWS and encountered an issue when running our application with the command "sudo npm start". The error message I received was: "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript he ...

javascriptnode.jstypescriptnpmamazon-ec2

Is it possible to verify if a bearer token has expired within an Angular application?

Is there a secure and efficient way to determine when a bearer token has expired in my Angular application? This is the issue I am facing: If I keep the app open in my browser, someone could potentially access sensitive information on my screen since I am ...

javascripthtmlangularjwtbearer-token

After installing the necessary modules, NextJS still refuses to run on MacOS

Just recently, I set up a new project with NextJS using create-next-app and everything went smoothly as expected. After that, I performed npm i to ensure all the modules were installed into the node_modules directory. However, when I attempt to run npm ru ...

node.jsreactjsnpmnext.jsnode-modules

Transferring an organized array to processing

My goal is to transfer an array of integers from a php file called load.php to a JS script, which will then forward it to a Processing file written in JavaScript. In load.php, I define the array and send it using JSON (the array contains a minimum of 40 i ...

javascriptphpajaxjsonprocessing

In JavaScript, the JSON Object only stored the final result from a loop

I am currently working on an HTML Site that features 4 inputRange sliders. My goal is to store all values from these sliders in a nested JSON Object when a user clicks on a button. However, I have encountered an issue where my JavaScript code only saves th ...

javascriptjquery