Utilizing External Library Functions with VueJS

I have been looking everywhere for a working example of how to connect an external JS file and call its function, but I haven't had any luck. Essentially, my goal is to link an external JavaScript file and execute its function using VueJS.

<script src="/static/medium-editor.min.js"></script>

<script>


export default {
name: 'App',

mounted: function() {
    var editor = new MediumEditor('.editable', {
        toolbar: {
            buttons: ['bold', 'italic', 'underline', 'anchor']
        }
    });
    console.log('testing...')
}

}
</script>

Although the file appears to be loading correctly, I keep encountering this error:

ReferenceError: MediumEditor is not defined

I've attempted to use import MediumEditor as well, but it seems we need to export it in the other JS file which hasn't worked either.

Just for context, I am trying to integrate this plugin into my VueJS test project: https://github.com/yabwe/medium-editor/blob/master/dist/js/medium-editor.js

If anyone has any insights on how to successfully call that external function within VueJS and make it functional, I would greatly appreciate it. I'm still learning, so any help would be invaluable. I've spent all day searching for a solution without any success.

Thank you in advance

Chandra

Update: I've included a JSFiddle link if you want to give it a try: https://jsfiddle.net/maharzan/nze45uxf/2/

Answer №1

Instead of using the script tag to import the file, try using the import statement.

<script>
    import MediumEditor from '/static/medium-editor.min.js'
    
    export default {
        name: 'App',
        
        mounted: function() {
            var editor = new MediumEditor('.editable', {
                toolbar: {
                    buttons: ['bold', 'italic', 'underline', 'anchor']
                }
            });
            console.log('testing...')
        }
    }
</script>

Update:-

If you use module.exports to export a function and then try to import it using import, you may encounter the error message

Cannot assign to read-only property 'exports' of object '#<Object>
. To avoid this issue, make sure to export the function using export default.

Check out this link for more information: https://github.com/webpack/webpack/issues/4039

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

The Ion-button seems to be malfunctioning

I am interested in using special buttons for my ionic 1 project, specifically the ion-button feature outlined on this page: Ionic Buttons. I attempted to create a Round Button and an Outline + Round Button: <h2 class="sub-header" style="color:#4 ...

Remove array element by key (not numerical index but string key)

Here is a JavaScript array that I am working with: [#ad: Array[0]] #ad: Array[0] #image_upload: Array[0] 13b7afb8b11644e17569bd2efb571b10: "This is an error" 69553926a7783c27f7c18eff55cbd429: "Yet another error" ...

Tips for getting Vue's element-ui validateField() function to function correctly in conjunction with v-if?

Kindly observe the password fields. The fields for 'Password' and 'Confirm Password' are displayed upon clicking on the 'Change Password?' button. The provided code functions properly and effectively validates the form using ...

Use Node.js to transform every spreadsheet into Json format

I have been attempting to convert an Excel file into JSON format. I tried utilizing the "xls-to-json" npm package with the following code: node_xj = require("xls-to-json"); node_xj({ input: "Auto.xlsx", // input xls output: "output.json", // output ...

Tips on incorporating an external JSON file into a javascript variable for global accessibility

I have been utilizing a JSON file in my project with the following structure: <script src="js/main.js"></script> <script> var data = {"bills":[{"id":1,"name":"DStv","reference":"SmartCard Number","logo":"bill\/logo\/24 ...

The path specified as "react-native/scripts/libraries" does not exist in the file

I've been troubleshooting an error on Github - https://github.com/callstack/react-native-fbads/issues/286. After cloning the repository and running it, I discovered that the error persisted. I am currently updating packages to investigate why this rec ...

Interactive tooltip feature in Apexchart

I need to include % in my Apexcharts tooltip after the Y value. Working with vue.js and without official documentation from apexchart, I managed to make it function correctly. This is what I have accomplished so far: data: function () { return { ...

A guide to transporting an item from coordinates {x,y} to {newx,newy} using Three.js

Given the coordinates X and Y of an object, where Z is always 0, I am seeking a way to smoothly move this object to a new location using Three.js, with a visible animation rather than suddenly appearing in a different spot. UPDATE: Below is a sample code ...

Exploring the power of data-callbacks in VueJS

For instance, if we have <div data-callback="recaptchaCallback"></div>, the recaptchaCallback function will run as shown: <script> function recaptchaCallback() { alert('OK'); } </script> The code above functions prop ...

What is the process of transferring JavaScript code to an HTML file using webpack?

I am looking to display an HTML file with embedded CSS, fonts, and JS (not linked but the content is inside). I have the CSS and fonts sorted out, but I am struggling to find a solution for the JavaScript. My project is based on Node.js. ...

Separate JavaScript/ASP statements using commas

I'm having trouble comma-delimiting this line in JavaScript, as I keep encountering errors: <a href="javascript:doSubmit(<%= pound & rs("AdvertiserID")%>, <%=rs("AdvertiserName")%>)"> It's Friday, what can I say... The &l ...

Creating a curved exponential data set with specific endpoints and a set number of data points

Struggling to create a function that involves math skills, I could really use some assistance. The task is to design a function that takes data points x and generates an array of size x with exponentially increasing values from 0 to 100. It would be ideal ...

Tips for iterating through nested objects with a for loop

Struggling with validations in an Angular 5 application? If you have a form with name, email, gender, and address grouped under city, state, country using FormGroupname, you might find this code snippet helpful: export class RegistrationComponent implemen ...

What are the consequences of altering meta tags once the DOM has fully loaded?

While delving into the A-Frame source code, I noticed that the library uses JavaScript to set various meta tags. It seems safe in the context of A-Frame as Mozilla recommends importing their library as a blocking, synchronously loaded script in the <he ...

Retrieving ng-model using ng-change in AngularJS

Here is an example of the HTML code I am currently working with: <select ng-model="country" ng-options="c.name for c in countries" ng-change="filterByCountry"></select> This HTML snippet is being populated by the following object containing a ...

There seems to be an issue with the bootstrap datepicker as it is throwing an error stating that $(

Currently in the process of developing a web application using AngularJS with MVC, I have integrated Bootstrap's datepicker into my project, Here is the code snippet: <div class="container"> <div class="row"> <div class=& ...

Creating a global variable for both development and production APIs in Vue 3 is a key aspect in ensuring consistency

Creating a global variable that works for both production and development environments has been challenging. Despite efforts, the variable value remains undefined. I have set up .env and .env.prod files in the project's main directory. VUE_APP_ROOT_ ...

Exploring the Enzyme library in React to trigger an onClick event with a specific parameter

In my quest to simulate an onClick method in my unit tests using Enzyme for React, I have encountered various tutorials on simulating an onClick event that takes an event e. For example: handleClick(e) { // Does something } .... <MyComponent onCli ...

Having a single quote within a double quote can cause issues with JavaScript code

I am currently developing a Django web app and facing an issue with sending a JSON object to my JavaScript code using a Django template variable. # views.py import json def get_autocomplete_cache(): autocomplete_list = ["test1", "test2", "test3", "te ...

Updating the jQuery mobile webpage

I have set up a small demo with two pages - the Home page and the Team 1 page. By clicking on the navigation menu, you can navigate to the Team 1 page from the Home page. However, if you are already on the Team 1 page and click on the Team 1 button again ...