How to properly export composables, types, etc from a nuxt3 custom module, and import them in a project

Question

I'm having some troubles to create a nuxt3 custom module: as long as I test it in the playground directory it works well, but as soon as I publish it on npm and install it in a nuxt3 project it stops working.

Module development

./package.json file (I just modified name key):

{
  "name": "nuxt-something",
  "version": "1.0.0",
  "license": "MIT",
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/module.mjs",
      "require": "./dist/module.cjs"
    }
  },
  "main": "./dist/module.cjs",
  "types": "./dist/types.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "prepack": "nuxt-module-build",
    "dev": "nuxi dev playground",
    "dev:build": "nuxi build playground",
    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
  },
  "dependencies": {
    "@nuxt/kit": "^3.0.0"
  },
  "devDependencies": {
    "@nuxt/module-builder": "^0.2.1",
    "@nuxt/schema": "^3.0.0",
    "@nuxtjs/eslint-config-typescript": "^12.0.0",
    "eslint": "^8.29.0",
    "nuxt": "^3.0.0"
  }
}

---

./src/module.ts file (I added addImports on top of default file):

import { fileURLToPath } from 'url'
import {
  defineNuxtModule,
  addPlugin,
  createResolver,
  addImports
} from '@nuxt/kit'

export interface ModuleOptions {
  addPlugin: boolean
}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'my-module',
    configKey: 'myModule'
  },
  defaults: {
    addPlugin: true
  },
  setup (options, nuxt) {
    const { resolve } = createResolver(import.meta.url)
    const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
    nuxt.options.build.transpile.push(runtimeDir)
    addImports({
      from: resolve(runtimeDir, 'composables/useSomething'),
      name: 'useSomething',
      as: 'useSomething'
    })
  }
})

---

./src/runtime/composables/useSomething.ts file:

export const useSomething = () => {
  const something = ref('')

  return {
    something
  }
}

---

Testing in ./playground/app.vue works greate:

<script lang="ts" setup>
import { useSomething } from '#imports'

const {
  something
} = useSomething();
</script>

<template>
  <div>
    <pre>{{ something }}</pre>
  </div>
</template>

Module testing in Nuxt3 project

Then I publish module on npm and install it in a new project via npm i nuxt-something .
./nuxt.config.ts file:

export default defineNuxtConfig({
  modules: [
    'nuxt-something'
  ]
})

---

./app.vue :

<script lang="ts" setup>
// I cant't simply import it from 'nuxt-something'
import { useSomething } from 'nuxt-something/dist/runtime/composables/useSomething'

const {
  something
} = useSomething();
</script>

<template>
  <div>
    <pre>{{ something }}</pre>
  </div>
</template>

---

Here, I have the following error:
Missing "./dist/runtime/composables/useSomething" export in "nuxt-something" package

What am I doing wrong?

I would like to simply import { useSomething } from 'nuxt-something and obviously get ride of the error, but what an I doing wrong?

Answer 1

Me again!
It appears that I made things complicated. I don't know why it didn't work earlier, but the simple fact of installing the package by npm i nuxt-something and add it to the nuxt.config.ts file allows me to do that:

<script lang="ts" setup>
// No import needed

const {
  something
} = useSomething();
</script>

<template>
  <div>
    <pre>{{ something }}</pre>
  </div>
</template>

That's exactly what I was expecting.