How can I import a JavaScript file from the assets folder in Nuxt.js?

Question

How can I import a JavaScript file from the assets folder in Nuxt.js?

I have explored multiple methods for importing the JS file, but I am still unable to locate it. Can anyone guide me on how to import a JS file from the assets folder to nuxt.config.js and have it accessible throughout the entire website?

nuxt.config.js

head: {
script: [
      {
        src: '~/assets/js/core.js',
      },
      {
        src: 'js/core.js',
      },
      {
        src: 'assets/js/core.js',
      },
      {
        src: '~assets/js/core.js',
      },
      {
        src: '@assets/js/core.js',
      },
      {
        src: '@/assets/js/core.js',
      },
      {
        src: '@assets/js/core.js',
      },
]
}

javascript vue.js nuxt.js

Answer 1

Answer №1

If you want to enhance your Nuxt project with JavaScript plugins, simply utilize the plugins directory.

For instance, consider a plugin named hello.js:

export default ({ app }, inject) => {
 // Inject $hello(msg) in Vue, context and store.
 inject('hello', msg => console.log(`Hello ${msg}!`))
}

Then, modify your nuxt.config.js file as follows:

module.exports = {
   plugins: ['~/plugins/hello.js']
}

In your component.vue file, you can now use the plugin like this:

export default {
  mounted() {
    this.$hello('mounted')
    // This will output 'Hello mounted!' in the console
  }
}

For more information on adding plugins to your Nuxt project, visit https://nuxtjs.org/docs/directory-structure/plugins/

Answer 2

If you want to enhance your Nuxt project with JavaScript plugins, simply utilize the plugins directory.

For instance, consider a plugin named hello.js:

export default ({ app }, inject) => {
 // Inject $hello(msg) in Vue, context and store.
 inject('hello', msg => console.log(`Hello ${msg}!`))
}

Then, modify your nuxt.config.js file as follows:

module.exports = {
   plugins: ['~/plugins/hello.js']
}

In your component.vue file, you can now use the plugin like this:

export default {
  mounted() {
    this.$hello('mounted')
    // This will output 'Hello mounted!' in the console
  }
}

For more information on adding plugins to your Nuxt project, visit https://nuxtjs.org/docs/directory-structure/plugins/

How can I import a JavaScript file from the assets folder in Nuxt.js?

Answer №1

Similar questions

Having trouble retrieving JSON data due to a CORS or callback error

Vim: Turn off autocomplete when using insert mode key bindings

Phonegap's JavaScript canvas feature is experiencing issues

What might be causing the issue of a click handler not registering during the initial page load when using Enquire.js

The implementation of CORS headers does not appear to function properly across Chrome, Firefox, and mobile browsers

What is the best way to showcase the output of a Perl script on a webpage

Discover the power of integrating JSON and HTTP Request in the Play Framework

The conversion from CSV to JSON using the parse function results in an inaccurate

The power of Ng-show and filtering

Troubleshooting a Form Validation Issue with React's useState Hook

Vue.js Element UI form validation - showcasing errors returned by server

Is there a way to extract the HTML source code of a website using jQuery or JavaScript similar to PHP's file_get_contents function?

How can I save files to the ~/Documents directory using Node.js on my Mac computer?

The ng-click event is not triggering the Controller Function as expected

Unable to access the .env file in Vue.js when executing cross-env NODE_ENV=development webpack-dev-server --open --hot

Using Vue to efficiently handle custom events through watchers

Error Encountered: unable to perform function on empty array

How can we avoid having the same event duplicated on a canvas, leading to the unnecessary rendering of multiple layers of the same event?

What is the best way to showcase saved HTML content within an HTML page?

Create an unordered list using the <ul> tag