Tirius Posts - Answer Overflow

Tirius

•Created by Tirius on 6/11/2024 in #❓・help

Nuxt Kit - addComponentsDir how exacly does import work ?

Docs say Register a directory to be scanned for components and imported only when used. Hello. I have a custom module that ship multiple custom components. Lets say I have a static generated Nuxt app that use that module, app have multiple pages, each page use one of the component. Does it mean that module components only be loaded by browser when I navigate to that page ? Or does it mean that only components that I have used in that app will be included in some Nuxt bundle? Thanks.

4 replies

NNuxt

•Created by Tirius on 6/11/2024 in #❓・help

It is possible to modify components with Nuxt hooks ?

I need to modify component inside custom module. I was able to modify "templates" files using app:templates hook inside defineNuxtModule setup method, but how to modify components that was add using addComponentsDir ?

nuxt.hook('app:templates', (app) => {
    // ...
});

nuxt.hook('app:templates', (app) => {
    // ...
});

1 replies

NNuxt

•Created by Tirius on 6/10/2024 in #❓・help

Testing custom Module.

Hello. I'm developing a Nuxt module, this module have component that is using composable that import/export data from "#build". Component is working in real app environment. But how can I test this type of component?

// module.ts
addTemplate({
    filename: 'ui.options.mjs',
    getContents: () => 'export default ' + JSON.stringify(options)
});
addImports({
    from: resolve('./runtime/composables/useModuleOptions'),
    name: 'useModuleOptions',
    as: 'useModuleOptions'
});


// Composable
import uiOptions from '#build/ui.options.mjs';

export const useModuleOptions = () => {
    return uiOptions;
}


// MyComponent.vue
<script setup>
const moduleOptions = useModuleOptions();
</script>


// Test
import { mountSuspended } from '@nuxt/test-utils/runtime'
import C from '../../src/runtime/components/MyComponent.vue';

const wrapper = mountSuspended(C);

// module.ts
addTemplate({
    filename: 'ui.options.mjs',
    getContents: () => 'export default ' + JSON.stringify(options)
});
addImports({
    from: resolve('./runtime/composables/useModuleOptions'),
    name: 'useModuleOptions',
    as: 'useModuleOptions'
});


// Composable
import uiOptions from '#build/ui.options.mjs';

export const useModuleOptions = () => {
    return uiOptions;
}


// MyComponent.vue
<script setup>
const moduleOptions = useModuleOptions();
</script>


// Test
import { mountSuspended } from '@nuxt/test-utils/runtime'
import C from '../../src/runtime/components/MyComponent.vue';

const wrapper = mountSuspended(C);

My test throw this error. Error: Failed to resolve import "#imports" from "node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs". Does the file exist?

3 replies

NNuxt

•Created by Tirius on 4/10/2024 in #❓・help

Tasks that require use of node modules.

I need to generate menu for a Nuxt pages inside /pages/abc/ directory, what options do we have for that kind of task? Edit: I'm talking about static generated friendly solution.

3 replies

NNuxt

•Created by Tirius on 4/9/2024 in #❓・help

How to read custom module options that defined in nuxt.config from module plugin ?

// nuxt.config
export default defineNuxtConfig({
    ui: {
        hello: 'world'
    }
});

// nuxt.config
export default defineNuxtConfig({
    ui: {
        hello: 'world'
    }
});

You can read module options in module.ts like this

// module
export default defineNuxtModule<ModuleOptions>({
    meta: {
        name: 'ui',
        configKey: 'ui',
    },
    setup(options, nuxt) {
        // options - module options

        // Add plugin
        addPlugin(resolve('./runtime/plugin'));
    }
});

// module
export default defineNuxtModule<ModuleOptions>({
    meta: {
        name: 'ui',
        configKey: 'ui',
    },
    setup(options, nuxt) {
        // options - module options

        // Add plugin
        addPlugin(resolve('./runtime/plugin'));
    }
});

But how to read module options in plugin ?

// /runtime/plugin
export default defineNuxtPlugin((nuxt) => {
    // How to access module options here ?
});

// /runtime/plugin
export default defineNuxtPlugin((nuxt) => {
    // How to access module options here ?
});

3 replies

Gaming

Programming