Nuxt - Failed to resolve dependency when using from a common component project

Question

I have a Nuxt project (lets call it main project) which uses a custom component library which I have developed (lets call is component project). The component project has a nuxt dependency and I use the NuxtLink component in it. I build the component project and reference it in my main project in package.json as:

"dependencies": { "wt-login": "file:../../../../ws-wtvue/components/wt-login" }

When I run the main project, I get a warning in the browser:

[Vue warn]: Failed to resolve component: NuxtLink

My rollup.config.js to bundle the component project looks like this:

import vue from 'rollup-plugin-vue'
import styles from 'rollup-plugin-styles'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'

export default [
  {
    input: 'src/index.js',
    output: [
      {
        format: 'esm',
        file: 'dist/wtlogin.mjs'
      },
      {
        format: 'cjs',
        file: 'dist/wtlogin.js'
      }
    ],
    plugins: [
      vue(), peerDepsExternal(), styles()
    ]
  }
]

Component project's package.json looks like:

{
  "name": "wt-login",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "dist/wtlogin.js",
  "module": "dist/wtlogin.mjs",
  "files": [
    "dist/*"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@types/node": "^18.17.3",
    "nuxt": "^3.6.5"
  },
  "dependencies": {
    "nuxt": "^3.6.5",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-styles": "^4.0.0",
    "rollup-plugin-vue": "^6.0.0",
    "wt-commonjs": "file:../../plugins/wt-commonjs"
  }
}

Main project's package.json :

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@types/node": "^18.17.3",
    "nuxt": "^3.6.5",
    "typescript": "^5.2.2",
    "wt-login": "file:../../../../ws-wtvue/components/wt-login"
  },
  "dependencies": {
    "primeflex": "^3.3.1",
    "primeicons": "^6.0.1",
    "primevue": "^3.34.1",
    "vue-uuid": "^3.0.0",
    "wt-login": "file:../../../../ws-wtvue/components/wt-login"
  }
}

Main project's nuxt.config.js

export default defineNuxtConfig({
  app: {
    head: {
      title: 'Title'
    }
  },
  css: [
    '~/assets/css/main.css',
    'primevue/resources/themes/saga-blue/theme.css',
    'primevue/resources/primevue.css',
    'primeicons/primeicons.css',
    'primeflex/primeflex.css'
  ],
  build: {
    transpile: ['primevue']
  },
  devtools: { enabled: true }
})

What config am I missing? Why does the main project (or component project) not find the component project's NuxtLink component?

[Edit] I suspect this (link below) could be the issue in the component project. That project us not initialized as a nuxt project but only uses the dependencies. And for that reason I cannot explicitly import a component as in this issue?

Cannot explicitly import nuxt components

Answer 1

I figured out that this could be achieved by using nuxt modules. Create a nuxt module project by following instructions at:

Creating a nuxt module project

Added an src/modules.ts file to the project, which looked like:

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

export default defineNuxtModule({
    meta: {
        name: '@wt/wtlogin',
        configKey: 'wtlogin',
        compatibility: {
          nuxt: '^3.8.0'
        }
    },
    async setup (options, nuxt) {
        const resolver = createResolver(import.meta.url)
        addComponent({
            name: 'WtLogin',
            filePath: resolver.resolve('./runtime/components/WtLogin.vue')
        });
    }
});

In the same component project added src/index.ts file as:

export { default } from './module'

Create a folder src/runtime/components and place your vue component here. Where I wanted to use nuxt-components like NuxtLink in my custom component

<template>
  <NuxtLink>Some link to test !!</NuxtLink>
</template>

Component project's dependency was required locally by other projects. Use npm install <path_to_component_project> in other projects to add this dependency.

In nuxt.config.ts file of the main project, import the component and register in modules as:

export default defineNuxtConfig({
  app: {
    ...
  },
  css: [
    ...
  ],
  build: {
    ...
  },
  modules: [
    WtLogin
  ]
})