Nuxt•2y ago

Creating module composable with module starter

Hello everyone. I'm trying to learn how to create a module. According to the documentation recipe, it can be (I only changed the name of the composable):

import { defineNuxtModule, addImports, createResolver } from '@nuxt/kit';

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url);
    addImports({
      name: 'useCMS',
      as: 'useCMS',
      from: resolver.resolve('runtime/composables/useCMS'),
    });
  },
});

import { defineNuxtModule, addImports, createResolver } from '@nuxt/kit';

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url);
    addImports({
      name: 'useCMS',
      as: 'useCMS',
      from: resolver.resolve('runtime/composables/useCMS'),
    });
  },
});

The docs do not provide a composable as an example, but I would assume it is the same as any nuxt composable. So this one should work: runtime/composables/useCMS.ts

export function useCMS() {
  return {
    title: 'Title of the website',
    navBar: false,
    columns: 5,
  };
}

export function useCMS() {
  return {
    title: 'Title of the website',
    navBar: false,
    columns: 5,
  };
}

In the play ground, I changed app.vue to the following:

<template>
  <div>
    {{ title }}
  </div>
</template>

<script setup>
const { title } = useCMS();
</script>

<template>
  <div>
    {{ title }}
  </div>
</template>

<script setup>
const { title } = useCMS();
</script>

But I get an error: 500 useCMS is not defined I created a new nuxt project and the same useCMS composable worked. I believe this might be a problem with the playground, even when removing the module from the playground config, and writing useCMS in the composable folder I get the same error. Here is a stackblitz reproduction of the issue: https://stackblitz.com/edit/github-budsam?file=src/module.ts Is this a bug or am I doing something wrong?

StackBlitz

Nuxt - Starter - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

4 Replies

Renato L.•2y ago

Looks like the workspace config dot files (.nuxtrc) comes with imports.autoImport=false, which I'm assuming disables auto imports for Nuxt. To fix my problem I changed to true, but I'm still not sure if this is expected behaviour.

Cue•2y ago

This is expected behaviour when autoImports=false

Renato L.•2y ago

Kind of weird default for a module starter. I'll take a look at the docs to see if I missed anything.

Cue•2y ago

I don’t know why the module starter would disable autoImports by default. Best guess is to prevent authors from assuming a dependency will be available in non-autoimport environment.

Gaming

Programming

Creating module composable with module starter