A more efficient way to have Vue import files from the assets folder rather than manually inserting script tags into the index.html file

Question

A more efficient way to have Vue import files from the assets folder rather than manually inserting script tags into the index.html file

I have a simple structure and would like to utilize assets from cdnjs.com in my project.

The issue arises when I try to import these assets from src/assets/lib instead of directly from the CDN. For example, importing jQuery like this:

Main.js:

import './assets/lib/jquery.min.js'

This causes my application to stop functioning correctly, with an error stating that jQuery is not defined. However, when I import the assets directly in index.html, everything works fine:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>

Error stack details:

Uncaught ReferenceError: jQuery is not defined
    at eval (amalia.js.min.js?c1e6:27)
    at Object../src/assets/amalia/build/js/amalia.js.min.js (app.js:1362)
    at __webpack_require__ (app.js:849)
    ... (additional error details follow)

I want to keep these assets within the src/assets folder for future SFC imports in other projects.

I attempted setting window.jQuery but it doesn't seem like the optimal solution, so any assistance from you guys would be greatly appreciated :)

javascript vue.js import cdn vue-cli

Answer 1

Answer №1

After a lengthy battle lasting 2 hours, I finally uncovered the solution:

npm install jquery --save

// vue.config.js

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  },
}

Answer 2

After a lengthy battle lasting 2 hours, I finally uncovered the solution:

npm install jquery --save

// vue.config.js

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  },
}

A more efficient way to have Vue import files from the assets folder rather than manually inserting script tags into the index.html file

Answer №1

Similar questions

Displaying a dynamic progress bar across all elements in fullscreen mode

Difficulty with Nuxt + Vuex: Retrieving data from state using getter

Upon clicking the button, input numbers into multiple number type inputs

`an error occurs when trying to loop through an object and add a key``

Karma is reporting an error with TypeScript, saying it cannot locate the variable 'exports'

Disable functionality not functioning properly on button attribute

Another option could be to either find a different solution or to pause the loop until the

The iconbar feature in the mobile menu is experiencing functionality issues

Ionic (Angular) experiencing crashes due to numerous HTTP requests being made

Unable to connect to Magento 2.3.6 REST APIs from localhost due to CORS policy restriction

What is the best way to decrease the border width of a chartjs doughnut chart?

Sign up for the observable, retrieve the asynchronous mapped outcome with input from the dialog, and then utilize the outcome from the map

The retrieval of JSON file using $.GetJson() is unsuccessful from local directory

Expanding/Combining entities

Error message: 'Unsupported projection operation: $push: { ... }', error code: 2, code name: 'InvalidOperation' }

tips for navigating through an AngularJS $resource instance

A sleek Javascript gallery similar to fancybox

Export web application content to PDF through rendering on the server side

Automated playback of integrated Twitter video

Create an Ajax request function to execute a PHP function, for those just starting out