Nuxt•17mo ago

what is the right way to use functions from js file?

Hi, Im using grained.js which is supplied from a grained.js file, I have the file imported through my head in my nuxt.config.ts, However whenever I want to use the grained function nuxt almost always returns a 500 error. What am I doing wrong here?

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  app: {
    head: {
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ],
      script: [
        { src: '/grained.js' }
      ],
      noscript: [
        { innerHTML: 'This website requires JavaScript.' }
      ],
    }
  }
});

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  app: {
    head: {
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ],
      script: [
        { src: '/grained.js' }
      ],
      noscript: [
        { innerHTML: 'This website requires JavaScript.' }
      ],
    }
  }
});

<script>

grained('#grain', {
  animate: true,
  patternWidth: 100,
  patternHeight: 100,
  grainOpacity: 0.1,
  grainDensity: 1,
  grainWidth: 1,
  grainHeight: 1
});

export default {
  name: 'App',
}

</script

<script>

grained('#grain', {
  animate: true,
  patternWidth: 100,
  patternHeight: 100,
  grainOpacity: 0.1,
  grainDensity: 1,
  grainWidth: 1,
  grainHeight: 1
});

export default {
  name: 'App',
}

</script

grained.js: https://github.com/sarathsaleem/grained/blob/master/grained.js

GitHub

grained/grained.js at master · sarathsaleem/grained

Generate animated noise texture with grained.js. Contribute to sarathsaleem/grained development by creating an account on GitHub.

2 Replies

TimOP•17mo ago

putting the function in a created or setup also returns a 500, however putting it above the export makes it sometimes returns a 500

at ./app.vue:6:1
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:341:5)
at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:197:14)
at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:231:12)
at async ./virtual:nuxt:/Users/timslager/Documents/Javascript/mbds_landing_page/landing_page/.nuxt/app-component.mjs:1:31
at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:341:5)
at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:197:14)
at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:231:12)
at async ./node_modules/nuxt/dist/app/components/nuxt-root.vue:6:31

at ./app.vue:6:1
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:341:5)
at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:197:14)
at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:231:12)
at async ./virtual:nuxt:/Users/timslager/Documents/Javascript/mbds_landing_page/landing_page/.nuxt/app-component.mjs:1:31
at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:341:5)
at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:197:14)
at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:231:12)
at async ./node_modules/nuxt/dist/app/components/nuxt-root.vue:6:31

right now I fixed it by calling the function after a promise

manniL•17mo ago

The easiest would be to import the JS file at build time and not add it via script tag Also be aware to call it in onMounted if it interacts with the dom

Gaming

Programming

what is the right way to use functions from js file?