OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to use a Vue component from an npm package in Nuxt.js?

  • Thread starter Thread starter Tom Klino
  • Start date Start date
T

Tom Klino

Guest
I'm trying to use a component made for Vue (specifically simple code editor) in my Nuxt 3 project.

I followed the nuxt docs on the topic and created a file under the modules directory named register-components.ts and added the following:

Code:
import { addComponent
  , defineNuxtModule
   } from '@nuxt/kit'
import hljs from "highlight.js";

export default defineNuxtModule({
  setup() {
    addComponent({
      name: 'CodeEditor',
      export: 'CodeEditor',
      filePath: 'simple-code-editor'
    })
  }
})

But I'm getting an error relating to the highlight.js module (which is a dependency of the simple-code-editor as far as I understand)

One of the errors I'm getting:

Code:
The requested module '/_nuxt/node_modules/highlight.js/lib/index.js?v=1c1ab998' does not provide an export named 'default'

Another (On a different laptop, though I'm not sure why I'm getting different errors):

Code:
indirect export not found: HighlightJS

Note: both errors show up even if I don't import highlight

How do I set up the module so that I can use it in my project?

<p>I'm trying to use a component made for Vue (specifically <a href="https://www.npmjs.com/package/simple-code-editor" rel="nofollow noreferrer">simple code editor</a>) in my Nuxt 3 project.</p>
<p>I followed the nuxt docs on the topic and created a file under the <code>modules</code> directory named <code>register-components.ts</code> and added the following:</p>
<pre class="lang-js prettyprint-override"><code>import { addComponent
, defineNuxtModule
} from '@nuxt/kit'
import hljs from "highlight.js";

export default defineNuxtModule({
setup() {
addComponent({
name: 'CodeEditor',
export: 'CodeEditor',
filePath: 'simple-code-editor'
})
}
})
</code></pre>
<p>But I'm getting an error relating to the <code>highlight.js</code> module (which is a dependency of the <code>simple-code-editor</code> as far as I understand)</p>
<p>One of the errors I'm getting:</p>
<pre><code>The requested module '/_nuxt/node_modules/highlight.js/lib/index.js?v=1c1ab998' does not provide an export named 'default'
</code></pre>
<p>Another (On a different laptop, though I'm not sure why I'm getting different errors):</p>
<pre><code>indirect export not found: HighlightJS
</code></pre>
<p>Note: both errors show up even if I don't import <code>highlight</code></p>
<p>How do I set up the module so that I can use it in my project?</p>
 

Latest posts

B
Replies
0
Views
1
Blundering Ecologist
B
Top