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?

Nuxt•4y ago•

20 replies

Fabian B.

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?

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads