Nuxt project encountering issues with loading JS files

I've been integrating a bootstrap template into my Nuxt project but seem to be facing some challenges with loading the necessary scripts.

I've attempted to import the scripts into my nuxt.config.js file in a couple of ways:

1.) Initially, I tried including the local source paths like this:

script: [
    { src: '~assets/js/jquery.js' },
    { src: '~assets/js/popper.min.js' },
    { src: '~assets/js/bootstrap.min.js' },
    { src: '~assets/js/jquery.cubeportfolio.min.js' },
    { src: '~assets/js/parallax.min.js' },
    { src: '~assets/js/jquery.appear.min.js' },
    { src: '~assets/js/jquery.themepunch.tools.min.js' },
    { src: '~assets/js/jquery.themepunch.revolution.min.js' },
    { src: '~assets/js/extensions/revolution.extension.actions.min.js' },
    { src: '~assets/js/extensions/revolution.extension.carousel.min.js' },
    { src: '~assets/js/extensions/revolution.extension.kenburn.min.js' },
    { src: '~assets/js/extensions/revolution.extension.layeranimation.min.js' },
    { src: '~assets/js/extensions/revolution.extension.migration.min.js' },
    { src: '~assets/js/extensions/revolution.extension.parallax.min.js' },
    { src: '~assets/js/extensions/revolution.extension.slideanims.min.js' },
    { src: '~assets/js/extensions/revolution.extension.video.min.js' },
    { src: '~assets/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'}
  ],

2.) Another approach was to add the scripts as static files:

script: [
    { src: '/js/jquery.js' },
    { src: '/js/popper.min.js' },
    { src: '/js/bootstrap.min.js' },
    { src: '/js/jquery.cubeportfolio.min.js' },
    { src: '/js/parallax.min.js' },
    { src: '/js/jquery.appear.min.js' },
    { src: '/js/jquery.themepunch.tools.min.js' },
    { src: '/js/jquery.themepunch.revolution.min.js' },
    { src: '/js/extensions/revolution.extension.actions.min.js' },
    { src: '/js/extensions/revolution.extension.carousel.min.js' },
    { src: '/js/extensions/revolution.extension.kenburn.min.js' },
    { src: '/js/extensions/revolution.extension.layeranimation.min.js' },
    { src: '/js/extensions/revolution.extension.migration.min.js' },
    { src: '/js/extensions/revolution.extension.parallax.min.js' },
    { src: '/js/extensions/revolution.extension.slideanims.min.js' },
    { src: '/js/extensions/revolution.extension.video.min.js' },
    { src: '/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'}
  ],

The content of my nuxt.config.js file is provided below:


// Code snippet here

Upon inspecting the page, I noticed that the script files are not being loaded, causing issues with the proper rendering of the bootstrap theme.

You can see how it should look here:

The entire repository can be accessed here: https://github.com/SIeep/brandon-evans-portfolio

Any guidance or assistance on this matter would be greatly appreciated!

Thank you :)

javascriptvue.jsnuxt.js

Answer №1

It is my firm belief that the scripts array should be placed within the head object as shown below:

export default {
  ...
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  script: [
    { src: '~assets/js/jquery.js' },
    { src: '~assets/js/popper.min.js' },
    { src: '~assets/js/bootstrap.min.js' },
    { src: '~assets/js/jquery.cubeportfolio.min.js' },
    { src: '~assets/js/parallax.min.js' },
    { src: '~assets/js/jquery.appear.min.js' },
    { src: '~assets/js/jquery.themepunch.tools.min.js' },
    { src: '~assets/js/jquery.themepunch.revolution.min.js' },
    { src: '~assets/js/extensions/revolution.extension.actions.min.js' },
    { src: '~assets/js/extensions/revolution.extension.carousel.min.js' },
    { src: '~assets/js/extensions/revolution.extension.kenburn.min.js' },
    { src: '~assets/js/extensions/revolution.extension.layeranimation.min.js' },
    { src: '~assets/js/extensions/revolution.extension.migration.min.js' },
    { src: '~assets/js/extensions/revolution.extension.parallax.min.js' },
    { src: '~assets/js/extensions/revolution.extension.slideanims.min.js' },
    { src: '~assets/js/extensions/revolution.extension.video.min.js' },
    { src: '~assets/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'}
  ],
  ...
}

Answer №2

To improve your code organization, consider using the import statement along with webpack instead of manually importing all these JavaScript files. It is considered a better practice.

Regarding the property script in Nuxt, it may not exist. However, if you still want to proceed with it, you can import your file within the head content, similar to this example:

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      { rel: 'stylesheet', href: '/assets/css/jquery.fancybox.min.css' }
    ],
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'}
    ]
  },

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

Disable Jquery toolstrip while the menu is open

Currently, I am utilizing the jQuery toolstrip plugin in my project. I have a requirement to disable it whenever the sidebar menu is opened. Below are the HTML codes for my menu with li tags: <div class="sidebar-wrapper" id="sidebar-wrapper"> <ul ...

javascriptjquerytoolstrip

Is there a way to change the name within an array of objects?

let myArray = [ { age: 21 }, { name: 'Sara' }, { test01: 'bla' }, { test02: 'bla' } ]; I have an array of objects and I need to update only the "name" property. How should I go about it? This is the desired outcome: ...

javascriptarrays

How to implement a service function to handle $http responses in a controller

Is it possible to use $http only for my service and not the controller? I am getting undefined in my console.log when trying to display data in a $scope. Here is my code: app.controller('adminControl', ['$scope','$routeParams&apo ...

javascriptangularjs

The debounce functionality provided by Lodash does not seem to be functioning properly within VueJS events

I am attempting to incorporate the debounce function into my filter. The goal is to avoid sending a request with each change in input text, and instead, wait for about one second. However, I'm encountering an issue where the filter doesn't seem ...

javascriptvue.jslodash

Waiting for all API queries in VueJS is important to ensure that all data has been

Hey there, I currently have an API set up using Django Rest Framework and the front end is built with VueJS. I have a form view that can either be used to Add New or Modify existing data. The structure of the form remains the same, but it checks if an ID ...

javascriptvue.jsvuejs2axios

Load prior state when the value changes with UseState in NextJS

In the development of my e-commerce application, I am currently working on implementing filters based on category and price for the Shop page. To handle this functionality, I have established the initial state as follows: const [filters, setFilters] = useS ...

javascriptreactjsreact-hooksnext.jsuse-state

Exploring nested JSON objects in Angular and rendering them in PHP

On my Json page, I have data organized like this : [{ "qid": "1", "contester": "0", "answer": "0", "question": "What would you do after getting into ...

javascriptphpangularjsjson

How can I use query to swap out elements within a div when clicked?

I have a project with two separate div classes named demo-heart and demo-coal. The goal is to implement functionality that allows the user to click on the fa-heart icon and have it switch to fa-coal, and vice versa when clicking on fa-coal. <div class ...

javascriptjquery

Is it possible to perform advanced SQL-like queries on JSON data using JavaScript?

Lately, I've been faced with a challenge where I need to manipulate a JSON result using SQL commands like left joins, sum, and group by. Has anyone else come across this issue recently? I'm currently experimenting with the jsonsql JavaScript libr ...

javascriptjquerysqljson

Ways to customize PreBid.js ad server targeting bidder settings

In an effort to implement a unique bidder setting key name within my prebid solution, I have taken the necessary steps as outlined in the documentation by including all 6 required keys. Is it possible to change the key name 'hb_pb' to 'zm_hb ...

javascriptgoogle-dfpprebid.js

Tips for getting information from a GET/POST response message with superagent

I'm currently utilizing Node.js and Superagent for testing my server implementation. I have successfully sent a Superagent GET request and received a positive response with the code provided below. My goal is to extract and log only the "id" value fro ...

javascriptnode.jsjsonsuperagent

The following page shrouded in mystery is experiencing technical issues

Encountering some issues on the live server with this code. It's functioning perfectly fine on my local machine, but once I try to deploy it on Netlify, I'm running into this error message: ⨯ useSearchParams() should be wrapped in a suspense bo ...

javascriptreactjsnext.js

HTML link with "mailto:" not opening in a new tab

Just posted for the first time! I'm attempting to create a mailto link using 'templated' JavaScript that pulls specific data from a JSON object: var menu = { "menu": [ { "title": "let's talk", "link": "mailto:<a href ...

javascripthtmlmailto

Enhancing your Vue Toastify experience with custom duration settings

Currently, I am utilizing Vue Toastify for my project from the GitHub link here. Allegedly, everything is functional except for one minor issue - it refuses to disappear automatically. Despite my attempts to rectify this by incorporating both successDura ...

vue.jsnotificationsduration

Error message encountered while trying to instantiate 'FormData'

My contact form was working perfectly fine until recently when it suddenly stopped allowing me to send messages. I keep encountering this error message every time I try to submit the form: Uncaught TypeError: Failed to construct 'FormData': pa ...

javascriptajaxphpmailer

Can you tell me which specific font Adobe Edge Code (Brackets) uses in its code editor?

Can someone please help me? I'm trying to identify the syntax highlighter being used in this code. Is it Prettify or something else? ...

javascriptcsstypographyadobe-edgeadobe-brackets

Unexpected disconnection from Socket.io server

Utilizing node.js service and angular client with socket.io for extended duration http requests. Service: export const socketArray: SocketIO.Socket[] = []; export let socketMapping: {[socketId: string]: number} = {}; const socketRegister: hapi.Plugin< ...

javascriptnode.jsangularwebsocketsocket.io

Include a selection of images within a popover box

I am currently working on a component that contains various experiences, each with its own popover. My goal is to display an array of images within each popover. Specifically, I have different arrays of images named gastronomiaExperience, deportesExperien ...

javascriptreactjsmaterial-ui

Guide to streaming audio files using vue.js

I am attempting to incorporate an audio file into my vue.js project using the following code: import sound from '../../recordings/sound.mp4' const audio = new Audio(sound) audio.play() Although this method works perfectly fine, I have encounter ...

javascriptvue.jsweb-audio-api

Building an HTTP request and response directly from an active socket in a Node.js environment

My current project involves passing HTTP requests to a child process in Node.js. I am struggling with passing the active Socket using child.send('socket', req.socket). Once inside the child process, I need to recreate the HTTP request and respons ...

javascriptnode.jssocketshttpexpress