NuxtN
Nuxt•3y ago
Renato L.

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'),
    });
  },
});


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,
  };
}


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

<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.
Was this page helpful?