Incorporating the Intro.JS library into a Vue-Cli/Webpack project

For my first project utilizing vue-cli and webpack, I am facing a challenge in integrating an external JavaScript library.

The library in question is Intro.js, which only requires me to import intro.js, add specific tags to HTML elements, and execute the introJs().start() function.

To begin, I installed the library using npm install introj.js --save

Next, I imported the library by including import introJS from 'intro.js' within the <script> section of my App.vue file.

Upon inspecting the compiled app.js file, I confirmed that introJS was successfully compiled, indicating no issues there.

My concern lies in where to place the introJs().start() function call. Initially, I attempted placing it within the mounted() function of the App.vue file, but encountered difficulties.

Furthermore, when executing introJS().start() from the mounted() method in App.vue, I encountered this error: 

Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_7_intro_js___default(...) is not a function"

javascriptwebpackvue.jsvuejs2intro.js

Answer №1

Try this solution:

const { tutorial } = require('tutorial.js')
tutorial().begin()

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

Vue: Load page content only after the route change is complete

Every time I visit a new route within the current session, I notice that the page loads and then takes about 2 seconds for the styles to be applied. This delay causes what is commonly known as CSS flashing or FOUC (Flash of Unstyled Content), which ultimat ...

javascriptvue.jsvuejs2vue-componentnuxt.js

Any suggestions on how to customize the tawk.to positioning within a Next Js script?

I've been attempting to adjust the positioning of the Tawk.to Sticky button on my Next js website using CSS, but it doesn't seem to be working. Below is the script within the Next Js script tag: <Script dangerouslySetInnerHTML={{ __html: ` ...

javascriptnext.jstawk.to

What steps should I follow to set up webpack/npm to incorporate a package into my project's source code, allowing me to make direct edits to it?

I am currently developing a react application which integrates the react-data-grid library. The assets are being served through webpack and dependencies are being managed using npm. I want to be able to make changes to react-data-grid on my localhost envi ...

npmwebpack

Tips for integrating Croppie output into upload PHP and transferring the output to another PHP page

Looking to create an app that fetches images from Facebook SDK or via Ajax upload, crops them using croppie.js, and uploads them to my server directory. As a newcomer to Ajax, jQuery, and PHP, I stumbled upon a similar app on the internet that performs the ...

javascriptphpjqueryajaxcrop

Can an image be transformed with a gradient map using HTML5 or CSS3?

Can an image be recolored using a gradient map in HTML5 or CSS3? I am also open to utilizing javascript libraries for this task. I came across a similar question where the solution only greyscales and adjusts RGB values: How can I use a gradient map to to ...

javascripthtmlcssgradientgrayscale

Retrieve postal code using longitude and latitude data from Google's API

I am currently working on a project that requires obtaining a postcode from longitude and latitude coordinates. Utilizing the Google Maps API, I'm able to retrieve the longitude and latitude based on a search term like 'Manchester'. After t ...

javascriptjqueryajaxgoogle-maps

JSON representation of 2 arrays

I am looking to combine 2 arrays in JSON format with keys and values. MyArray1 [ "Orange:10", "Orange:5", "Banana:20", "Apple:5" ] MyArray2 [ "Orange:5", "Banana:10", "Apple:15" ] MyJSON [ {"fruit": "Orange", "value": 15}, {"fruit": "Banana ...

javascriptarraysjsonobject

What is the most effective method for incorporating an SVG into ReactJS?

Can anyone help me figure out how to create a React component that displays an SVG? I've been struggling and can't seem to get it right. What's the best approach for converting SVGs into React components? I attempted adding them using tags ...

javascriptreactjs

Discover the combobox element and its value can be easily achieved by using Selenium's find_element_by_xpath method

I am having trouble setting a value in a combobox using selenium. The find_element_by_xpath statement is failing to locate the combobox by class or ng-model. Specifically, I am attempting to change the time period for a stock from one day to one week. Her ...

javascriptpython-3.xselenium-webdriver

I'm trying to figure out how to make HTML tags display within a React/Next <head> element

I inherited a React/Next project filled with spaghetti code. The previous developer did not prioritize SEO, and I am still learning React. Now, my main focus is getting tags to render in the Component. <Head> <meta key="data-tes ...

javascriptreactjstypescript

Double Calling of Angular Subscription

I am currently working with a series of observables that operate in the following sequence: getStyles() --> getPrices() Whenever a config.id is present in the configs array, getStyles() retrieves a style Object for it. This style Object is then passed ...

javascriptangulartypescriptobservable

The best way to incorporate FontAwesome into a Vue project in the year 2020

In my Vue 2.5 project (running with Laravel), I am interested in using FontAwesome fonts without relying on a CDN. The recommended approach for offline use is to include the following code in my app.js: import { library } from '@fortawesome/fontawesom ...

javascriptvue.jsfont-awesome

Client-side validation in Javascript will not function on ASP.Net

I'm facing an issue with validating textboxes in a webform within a Masterpage before saving data to the Database. Strangely, the JavaScript code works fine in a simple Login application but fails in my actual app by saving empty spaces to the databas ...

javascriptc#asp.net

Is it possible to add an element to an array field in a document using Mongoose/Node?

Currently, I'm working with a Mongoose schema that includes an array field designed to hold multiple strings: const exampleSchema = new.mongooseSchema({ field1: String, field2: String, field3: [String] }) My goal is to configure the ...

javascriptnode.jsarraysmongooseschema

What is the best way to load data that is essential for the entire functionality of an AngularJs Application?

Within my application, there exists essential data that is utilized by various controllers to carry out their functions. For instance, the user and other entities must make REST calls to the server. Currently, I have an AppController (app.js) responsible ...

javascriptangularjsindexeddbangular-controller

How can you use $in and $or in a MongoDB query to search for specific values?

Here is an array of words: var norm = [ 'may', 'funny', 'top funny', 'dinner', 'dog', 'hello', 'flo', 'sake', 'hai', 'video', 'rhym ...

javascriptnode.jsmongodbexpress

Categorize objects in an array based on their groups

How can I categorize this array of objects by their categoria? items = [ { categoria: 'Sandwiches', nombre: 'Sandwich de Pollo', precio: 12 }, { categoria: 'Sandwiches', nombre: 'Sandwich de Lomo', precio: 12 } ...

javascriptarraysangulartypescript

Webpack now requires updating the utoprefixer plugin to replace the color-adjust property with print-color-adjust. The color-adjust shorthand is no longer supported and has been deprecated

My webpack setup includes: main.scss @import "~bootstrap/scss/bootstrap"; packages.json "engines": { "node": "14.18.1", "npm": "6.14.15" }, "devDependencies": { "@babe ...

twitter-bootstrapnpmwebpacksass

"Troubleshooting a jittery React sticky header during scrolling: Dealing with IntersectionObserver and CSS

My current project involves implementing a sticky header in a React application using the Carbon framework. The goal is to have a sticky header with a bottom border when users scroll up, providing context for their viewing experience. However, when they sc ...

javascriptcssreactjs

Error: The expression `xmlDoc.load` returns a value of undefined, which is not an object

My current challenge involves loading an XML file using Javascript in IE, Firefox, and Safari. I have yet to find a function that works well across all three browsers. The load function I am currently using is similar to the one found in w3schools tutorial ...

javascriptxmlajax