Nuxt•3y ago

Nuxt/kit: when creating a module, how can I inject a script into the body

Hi there. I am currently creating a nuxt module. One of the things I need to do is, I have a minified .js file I want to inject into the body. But only on client side. I tried

// src/module.ts:
// setup method:

addTemplate({
  filename: 'my-script.js',
  getContents: () => import(resolve(runtimeDir, 'my-script')),
})

nuxt.options.app.head.script?.push({
  src: '/my-script.js',
  body: true,
  defer: true,
})

// src/runtime/my-script.js
console.log('hello world')

// src/module.ts:
// setup method:

addTemplate({
  filename: 'my-script.js',
  getContents: () => import(resolve(runtimeDir, 'my-script')),
})

nuxt.options.app.head.script?.push({
  src: '/my-script.js',
  body: true,
  defer: true,
})

// src/runtime/my-script.js
console.log('hello world')

This does include the script directly, so also in SSR. When adding something like

if (typeof window !== 'undefined')

if (typeof window !== 'undefined')

to only inject it on the client-side, it never gets injected since the

src/module.ts

src/module.ts

seems to only run once on start.

I am sure that

addTemplate

addTemplate

is not the right method.

Do you know any method to add a file into the

public

public

folder?

harlan•1/21/23, 9:52 AM

You should reference how the color module does it

harlan•1/21/23, 9:52 AM

https://github.com/nuxt-modules/color-mode/blob/master/src/module.ts#L63

GitHub

color-mode/module.ts at master · nuxt-modules/color-mode

Dark and Light mode with auto detection made easy with Nuxt

color-mode/module.ts at master · nuxt-modules/color-mode

harlan•1/21/23, 9:53 AM

https://github.com/nuxt-modules/color-mode/blob/master/src/runtime/nitro-plugin.ts

GitHub

color-mode/nitro-plugin.ts at master · nuxt-modules/color-mode

Dark and Light mode with auto detection made easy with Nuxt

color-mode/nitro-plugin.ts at master · nuxt-modules/color-mode

harlan•1/21/23, 9:53 AM

probably the easiest

Fabian B.OP•1/21/23, 10:18 AM

Thanks @harlan , I see that this would inject the script as inline, but not actually "upload" or add a JS file to the

public

public

folder of the modules' user, right?

The usecase is that I have a .min.js script coming from a 3rd party, and this needs to be injected into the

public

public

folder of a user.

harlan•1/21/23, 10:31 AM

maybe something like

Fabian B.OP•1/21/23, 10:45 AM

That looks great, though it doesn't actually add those files to the folder. I've worked a lot with nuxt, but not yet created a module, so maybe I am overlooking somthing

I saw someone did it with just fs.writeFile, not sure about if that's the best approach.

https://github.com/nuxt/nuxt/discussions/17807#discussioncomment-2339732

https://github.com/florian-lefebvre/portfolio/blob/c513428dea912a19ffb684b8b571b08b8882158c/modules/sitemap.ts#L54

harlan•1/21/23, 11:10 AM

so this code basically adds a new public dir for nitro to serve static assets from

harlan•1/21/23, 11:11 AM

if you hit the path it should serve the file

harlan•1/21/23, 11:12 AM

using fs is fine too

harlan•1/21/23, 11:12 AM

if you don't need it in dev

Fabian B.OP•1/21/23, 11:16 AM

I now have implemented it like so:

and the nitro plugin

which works perfectly well. Thanks again

harlan•1/21/23, 11:19 AM

looks good, only issue is that issues will have an untracked git file with this setup

harlan•1/21/23, 11:19 AM

if that's not an issue then all good

Fabian B.OP•1/21/23, 11:22 AM

Yeah that's right. But since the script is only needed in prod and also I plan to change the content inside of the script based on user config (since it contains a hardcoded url I want users to override), I think it's perfectly fine for the file not to be in git, but to be generated on the fly in build.

Fabian B.OP•1/21/23, 2:15 PM

A small follow-up, maybe you've stumbled on this. I have now released the package on a @Next tag. It is on npm with .

When testing this module in the playground, everything works fine. Installing this module in another real nuxt app, I get the following error on npm run build:

I've tried to implement it like i the color-module:

https://github.com/hamlogic/nuxt-cloudflare-analytics/blob/next/src/module.ts
https://github.com/hamlogic/nuxt-cloudflare-analytics/blob/next/src/runtime/nitro-plugin.ts

Do you have an idea on why this seems to fail? Thanks in advance! @harlan

Fabian B.OP•1/21/23, 2:47 PM

Solved it, nevermind

Fabian B.OP•1/21/23, 5:57 PM

I forgot to include these 3 lines

and they are somehow required

Fabian B.OP•1/21/23, 5:57 PM

Here is the repo https://github.com/hamlogic/nuxt-cloudflare-analytics/

GitHub

GitHub - hamlogic/nuxt-cloudflare-analytics: Add Cloudflare Web Ana...

Add Cloudflare Web Analytics to your Nuxt Project. Contribute to hamlogic/nuxt-cloudflare-analytics development by creating an account on GitHub.