8000 Question/ bug: How to provide functions from within Nuxt.config.ts or module.ts to runtime? · Issue #20933 · nuxt/nuxt · GitHub
[go: up one dir, main page]

Skip to content
Question/ bug: How to provide functions from within Nuxt.config.ts or module.ts to runtime? #20933
@jvhellemondt

Description

@jvhellemondt

Not sure if this belongs here. Feels like it doesn't belong in the Nuxt repo either, because it's module specific. Let me know if I need to move it.

So my situation is the following. I'm further improving my Nuxt-vuetify module. Users of the module, will provide a Vuetify config through the Nuxt.config.ts. Now Vuetify has the following feature when it comes to icons, fa-svg. To use this feature, you need to provide a function as iconSet (component). This is how it works, I cannot change this. However, this is not the cause of my "issue".

What I can't seem to get working is the following, tested it on the nuxt-module-starter:

In my Nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["../src/module"],
  myModule: {
    testViaConfig() {
      console.log("test");
      return "test";
    },
  },
});

in my module.ts:

import { defineNuxtModule, addPlugin, createResolver } from "@nuxt/kit";

// Module options TypeScript interface definition
export interface ModuleOptions {}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: "my-module",
    configKey: "myModule",
  },
  // Default configuration options of the Nuxt module
  defaults: {},
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url);

    nuxt.options.runtimeConfig.public.myModule = {
      ...options,
      test: "runtimeConfig, check",
      testViaModule: () => {
        console.log("test");
        return "test";
      },
    };
    // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
    addPlugin(resolver.resolve("./runtime/plugin"));
  },
});

In my runtime/plugin.ts:

import { defineNuxtPlugin, useRuntimeConfig } from "#app";

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();
  const options = config.public.myModule;
  console.log({ options });
  console.log("Plugin injected by my-module!");
});

I would expect that in the browser both the testViaConfig and testViaModule functions would be logged. Except only the string (defined in module.ts, also passed via runtimeConfig), is logged in the browser.

I have made a codesandbox to reproduce. You can find it here.

Is it intended that I cannot pass functions to runtime like this? I have the feeling that it's not possible due to rollup, however I'm definitely not an expert on that. If so, is there another way around? It seems vital that users of the module can provide it via the Nuxt.config.ts from a user experience perspective.

Hope someone is able to help out. If I need to explain further, please let me know.

Thank you in advance.

Best regards,

J

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0