Add a JavaScript library to the nuxt.config.js file using Assets

When attempting to add javascript files, I keep encountering the following issue:

" error in GET http://localhost:3000/assets/js/jquery-3.4.1.min.js net::ERR_ABORTED 404 (Not Found)

I'm unsure if this is the correct method for including the javascript file. Any assistance would be greatly appreciated.

     head: {
    title: 'streamit',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    script: [
      { src: '/assets/js/jquery-3.4.1.min.js', type: 'text/javascript' },
    
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/images/favicon.ico' }
    ]
  },

assets/ js/ jquery-3.4.1.min.js

javascriptvue.jsnuxt.js

Answer №1

Follow these steps to ensure smooth operation: create a static folder and then make a subfolder named js. Place your jquery-3.4.1.min.js file inside the js folder. In your nuxt.config.js, add the following:

script: [
  { src: 'js/jquery-3.4.1.min.js' },
]

Answer №2

To resolve the problem, I created a new directory named "static" and placed all JavaScript files inside it. Here is how I added the necessary script tag:

script: [
      { src: './js/jquery-3.4.1.min.js', type: 'text/javascript' },
    
    ],

Answer №3

To use the latest version of Nuxt (version 3.6.5), follow these steps:

Ensure you have a `public` folder in your project directory. Inside the `public` folder, create a new folder named `js` and place your `jquery-3.4.1.min.js` file inside it. In your `nuxt.config.js` file, add the following code:

    script: [
      { src: 'js/jquery-3.4.1.min.js' },
    ]

See the screenshot below for an illustration of the folder structure:

https://i.sstatic.net/rbTgb.png

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

What is the best way to retrieve the 'date,time' column from a MySQL database and use it as input for the google chart DateRangeFilter?

I am facing an issue with a column in my dataset that contains date-time values, such as '2017-2-2 10:30:20'. I need to use these rows as an input for a Date Range Filter in Google Chart. Can someone guide me on how to achieve this? I attempted ...

javascriptmysqlgoogle-visualization

Problems with ng-repeat in kenwheeler's AngularJS implementation

Hey there! I'm currently using the slick carousel by ken wheeler, but when I implement ng-repeat on the div, it only shows 'listed images'. I'm not sure what I'm doing wrong here. Any ideas? <section class="regular slider" sty ...

javascriptangularjsangularjs-ng-repeat

retrieve only the following occurrence throughout the entire file

I am looking to target only the first occurrence of an element in the document after a clicked element. Here is my current approach: $('.class').click(function(){ var x = $(this).nextAll('.anotherclass').first(); //do something ...

javascripthtmljqueryjquery-selectors

Troubleshooting the issue with Vue 3 props not being updated

In my parent component, the structure is as follows: <template> <button @click="initStr" value="init str" /> <child :str="str" /> </template> <script> export default { components: { child, } ...

vue.js

Using Javascript to swap background images, ensuring that the initial image is shown only once

I have a query regarding the background image rotation on my HTML page. I am currently using the code below to change the background image, but I want the first image to be displayed only once while the rest continue rotating. Can anyone provide guidance o ...

javascriptjqueryhtml

Where should custom PHP code be placed in Prestashop 1.7.5?

Currently, I am facing the challenge of incorporating a custom PHP code snippet into Prestashop's file structure so that it is accessible on all pages such as the cart, categories, and CMS pages. After some research, I have found suggestions to place ...

javascriptphpajaxprestashop

PHP Ajax Image Uploading and Storage

Is there a way to effortlessly upload an image and save it in the uploads folder without any page refresh? Not only that, but can we also have the uploaded image displayed on the screen within a designated div section? Unfortunately, I seem to encounter a ...

javascriptphphtmlajaxupload

The swiper slider loop malfunctions when the number of slides is less than the double-value

When using **6 slides** with slidesPerView: 3, everything works fine. However, if I use 5 slides and set slidesPerView: 3, the loop stops after the last slide. var swiper = new Swiper('.swiper-container', { direction: 'ver ...

javascriptjquerycss

Why isn't it possible to send POST data to a JSON file using JQuery/AJAX?

I'm currently learning how to use JQuery/Ajax from a helpful tutorial on YouTube. To watch the video, simply click here. While I can successfully retrieve data from the order.json file, I encounter an error whenever trying to send POST requests. Bel ...

javascriptjqueryhtmljsonajax

Unique API or browser storage functionality

Currently, I am working on developing a client application for a customer's webservice using Angular and Cordova. Upon calling the Login API, I receive an array of categories that are required for the menu. My dilemma lies in determining whether it ...

javascriptangularjsapicordovalocal-storage

Having trouble creating a text channel in discord.js

Today I successfully programmed a bot to respond to the "!new" command, but encountered an unexpected issue. The current functionality of the bot creates a channel named "support-1" when prompted with the "!new" command. However, every subsequent use of th ...

javascriptdiscord.js

Having issues with the `onlyCountries` property in the React phone input 2 component when using

I've integrated the react-phone-input-2 library to include phone number fields in my project. I need to provide selected countries only for the country codes. I'm fetching iso2countrycodes from the server and passing them to my Phone input compon ...

javascriptarraysreactjs

Upon clicking the 'Add Image' button, TINYMCE dynamically incorporates an input

I am in search of creative solutions to address an issue I'm facing. Currently, I am utilizing TINYMCE to incorporate text into my webpage. However, I would like to enhance this functionality by having a feature that allows me to add an image along w ...

javascriptphpcssajaxtinymce

Using conditional logic to render components in VueJS

How can I conditionally display content in a parent component based on a user input variable? If the userinput variable is false, I want to remove the <div class="parent"> and show the PopUp component instead. I've tried using `v-if` ...

javascripthtmlvue.jsvue-componentconditional-rendering

In Snowflake, SQL error handling block fails to execute

Implementing error handling in Snowflake using a Try Catch block has been my focus. I've enclosed SQL queries within JavaScript for this purpose. However, upon executing the query, I noticed that it skips the Try Catch block and directly executes the ...

javascriptsqlsnowflake-cloud-data-platform

Are there any nodeJS template engines similar to C#'s RazorEngine?

Is there a template engine for Node.js that is similar to RazorEngine, specialized in generating HTML but also capable of handling other types of output? I am looking for a tool that can dynamically create JavaScript files along with HTML content like Razo ...

c#javascriptnode.js

Guide on creating a toggle effect for a div with querySelector and addEventListener

I utilized the email and password divs provided by Bootstrap. The CSS for the id dropdownlogin includes display: none; in this post, I hope that I have shared adequate information. <script> document.addEventListener('DOMContentLoaded', ...

javascripthtmlcss

Is it possible to make asynchronous calls to an external API without causing any drag on the overall speed of the website?

Currently, I operate an online store where at the end of the page, I integrate the eBay API with items related to the main product. Unfortunately, I have noticed that this integration causes a significant delay in the overall page loading by 4 to 10 secon ...

javascriptphpajaxcurl

Using React to redirect a category of components to a specific sub-path, such as transforming "/templates" to "/templates/list"

Having a React app, I'm looking for a way to avoid duplicating the function of redirecting users to /<component>/list in every component if they visit just /<component>. How can this be achieved at a higher level? I have a layout componen ...

javascriptreactjsreact-router

What is the best way to call a JavaScript function within a PHP echo statement that outputs a <div> element?

Having trouble echoing this PHP code due to issues with single quotes, causing the HTML to end prematurely. Any suggestions on how to fix this? function button($conn){ $sql = "SELECT * FROM table"; $result= mysqli_query($conn, $sql); while($r ...

javascriptphphtmlcss