Steps for importing an external .js file into a Vue 2 component

Question

Steps for importing an external .js file into a Vue 2 component

Hello, I am currently working on vue.js 2 and I have come across a problem with the JavaScript part. I would like to include the general.js file in my posts.vue file. Can anyone provide assistance with this? Your help would be greatly appreciated :)

Below is the code snippet:


<template>
    <div>
        <p> {{message}} </p>
    </div>
</template>

<script>
    import axios from 'axios';
    import _ from 'lodash';

    export default {
        data() {
            return {
                message : 'Here is my HTML'    
            }
        }
    }
</script>

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

To include jQuery in your webpack bundle, you can use the webpack provide plugin. Here is an example configuration:

new webpack.ProvidePlugin({
   $: "jquery",
  jQuery: "jquery"
})

For more information, check out the documentation here.

While it's generally recommended to avoid mixing jQuery with Vue, there are scenarios where you may need to use jQuery within a Vue component. Here's an example:

Let's say you have a simple jQuery plugin called alertText.js:

//define the plugin
$.fn.alertText = function() {
   this.css( "color", "red" );
};

In your component.vue file, you can include and utilize the jQuery plugin like so:

<template>
  <div>
     <p class="alert-me">this text will be changed to red</p>
  </div>
</template>

<script type="text/javascript" src="alertText.js"></script>

<script>
    $('.alert-me').alertText(); // call the plugin on 'alert-me' class
</script>

<script>
    // define your component script
    export default {
         data():{
              //...
          }
     }
</script>

Answer 2

To include jQuery in your webpack bundle, you can use the webpack provide plugin. Here is an example configuration:

new webpack.ProvidePlugin({
   $: "jquery",
  jQuery: "jquery"
})

For more information, check out the documentation here.

While it's generally recommended to avoid mixing jQuery with Vue, there are scenarios where you may need to use jQuery within a Vue component. Here's an example:

Let's say you have a simple jQuery plugin called alertText.js:

//define the plugin
$.fn.alertText = function() {
   this.css( "color", "red" );
};

In your component.vue file, you can include and utilize the jQuery plugin like so:

<template>
  <div>
     <p class="alert-me">this text will be changed to red</p>
  </div>
</template>

<script type="text/javascript" src="alertText.js"></script>

<script>
    $('.alert-me').alertText(); // call the plugin on 'alert-me' class
</script>

<script>
    // define your component script
    export default {
         data():{
              //...
          }
     }
</script>

Steps for importing an external .js file into a Vue 2 component

Answer №1

Similar questions

Currently, I am compiling a list of tasks that need to be completed, but I am encountering a dilemma that is proving difficult to resolve

Tips for transferring large data without a page redirect using jQuery's post method:

Vuex: Unable to pinpoint why my getter is failing to sort correctly

Issue with submitting VueJS form on mobile devices, works fine on web browsers but not on

The never-ending scroll feature in Vue.js

Using AngularJS: Implementing ng-include with a custom function

Do not request for this element within the array

The datepicker in the jQuery modal dialog is displaying incorrect formatting after a click event

Having trouble with my React input field - once I set the value, it becomes immutable

Unlock the power of jQuery chaining with the val() method

jQuery fails to fetch information

Having trouble getting images to display in Vue markdown?

Adjustable <a> component

No data found in Node.js after receiving AngularJS POST request

What is the best method to divide a string, enclose it within a span tag, and generate fresh code using jQuery?

Utilizing AJAX to invoke a function

Searching with Sequelize for an indirect relationship: How can it be done?

Implementing multiple modules within a shared parent route in Angular

Adjust the current jQuery code to update the URL as the user scrolls

Can you explain the mechanics behind the animation of the upvote button on steemit.com?