How to load local JS file with nuxt

Question

I have multiples script in my folder /assets/js. I added them to nuxt.config.js like that:

script: [
  { src: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' },
  { src: '~assets/js/bootstrap.min.js' },
  { src: '~assets/js/retina-1.1.0.js' },
  { src: '~assets/js/jquery.hoverdir.js' },
  { src: '~assets/js/jquery.hoverex.min.js' },
  { src: '~assets/js/jquery.prettyPhoto.js' },
  { src: '~assets/js/jquery.isotope.min.js' },
  { src: '~assets/js/custom.js' }
],

There is no problem for the first one but for the local files none are loading. I tried : '@/assets', '/assets', 'js/', '~/assets', etc but nothing is working.

I always get this error:

GET http://localhost:3000/~assets/js/custom.js net::ERR_ABORTED

So how can I load my files please ? Thank you

stackoverflow.com/a/52499653/14761370 you can check this response. It solved my problem — SefaUn
– SefaUn, Commented Apr 17, 2022 at 13:50

zarpio · Accepted Answer · 2021-03-04 09:52:53Z

22

Try to put the JS files in the root of the assets directory. Otherwise, you need to create a static directory. I hope this helps.

In your nuxt.config.js

head: {
    link: [{
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.png'
    }],
    script: [
        {
            type: 'text/javascript',
            src: 'js/jquery.min.js',
            body: true
        },
        {
            type: 'text/javascript',
            src: 'js/script.js',
            body: true
        }
    ]
}

edited Mar 4, 2021 at 9:52

zarpio

7,3688 gold badges64 silver badges75 bronze badges

answered Nov 17, 2017 at 3:01

M.Ismail

4375 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Splinteer Over a year ago

Moved to static directory and it worked like that: { src: 'js/bootstrap.min.js' }, Thank you

Marnix Elling Over a year ago

I moved instafeed.min.js to the root of static and added script: [{ type: 'text/javascript', src: 'js/instafeed.min.js', body: true }] to the head object in nuxt.config.js but when I try to verify its linked by opening the file in a new tab it says /* script not found */

shellking4 Over a year ago

I tried this and different other ways but still can't get it right. Could anybody update this answer and show us the way to do it now ? Please....It is kind of a stumbling block for me right now

Javad.rajabi · Accepted Answer · 2021-02-25 17:56:17Z

3

your js files must be in the static path folder and add this code to your *.vue files to use

export default {
    head() {
    return {
      link: [
        {
          rel: "stylesheet",
          href:
            "/assets/css/style.css"
        },
      ],

      script: [
        {
          src: "assets/js/style.js",
          body: true
        },],}
      }

answered Feb 25, 2021 at 17:56

Javad.rajabi

2173 silver badges5 bronze badges

3 Comments

Splinteer Over a year ago

Sorry but it was 4 years ago. Vuesjs is getting popular now ?

Javad.rajabi Over a year ago

If you take a look at the git hub, you will find that vue is even more popular than react. And it is becoming more popular every day

Splinteer Over a year ago

It’s crazy that I was using it 4 years ago and it’s was hard to find help about it

Mostafa Khair · Accepted Answer · 2023-11-07 14:24:08Z

0

With Nuxt 3, I had to add Js files in the "public/assets/" folder. like that:

Public/assets/js/file-name1.js
Public/assets/js/file-name2.js

in nuxt.config.ts: src: must start with "/assets/".

app: {
  head: {
     script: [  
         { tagPosition: 'bodyClose', src: '/assets/js/file-name1.js' },
         { tagPosition: 'bodyClose', defer: "true", src: '/assets/js/file-name2.js' },
     ]
  }
}

edited Nov 7, 2023 at 14:24

answered Nov 6, 2023 at 18:52

Mostafa Khair

11 bronze badge

Comments

김종우 · Accepted Answer · 2025-02-16 04:10:05Z

0

local screenGui = Instance.new("ScreenGui") screenGui.Name = "UpdateFrameGui" screenGui.ResetOnSpawn = false screenGui.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui") local frame = Instance.new("Frame") frame.Name = "UpdateFrame" frame.Size = UDim2.new(1, 0, 1.5, 0) frame.Position = UDim2.new(0, 0, -0.1, 0) frame.BackgroundColor3 = Color3.fromRGB(30, 30, 30) frame.BorderSizePixel = 2 frame.BorderColor3 = Color3.fromRGB(255, 255, 255) frame.Parent = screenGui local textLabel = Instance.new("TextLabel") textLabel.Name = "UpdateText" textLabel.Size = UDim2.new(1, 0, 1, 0) textLabel.Position = UDim2.new(0, 0, 0, 0) textLabel.BackgroundTransparency = 1 textLabel.Text = "JOIN discord.gg/hiddenrbx FOR NEW VERSION!" textLabel.TextColor3 = Color3.fromRGB(255, 255, 255) textLabel.TextScaled = true textLabel.Font = Enum.Font.GothamBold textLabel.Parent = frame

answered Feb 16 at 4:10

김종우

1

1 Comment

Community Feb 16 at 18:24

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Balaji · Accepted Answer · 2021-02-24 15:23:08Z

-2

<template>
  <img src="~/assets/your_image.png" />
</template>

or

background: url('~assets/banner.svg');

or

<img :src="require(`~/assets/img/${image}.jpg`)" />

https://nuxtjs.org/docs/2.x/directory-structure/assets/

Note:

The ~/ alias won't be resolved correctly in your CSS files. You must use ~assets (without a slash) in url CSS references, i.e. background: url("~assets/banner.svg")

answered Feb 24, 2021 at 15:23

Balaji

11.2k5 gold badges61 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to load local JS file with nuxt

5 Answers 5

3 Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related