[Vue] How to use component of a component library (npm package)?

[momocode-de]

I have integrated ux-vue as described here. I want to use it with the asset mapper, which already works if I write my own components in .js format under assets/vue/controllers.

I would now like to use Naive UI as a component library. I have added the library with bin/console importmap:require naive-ui to the importmap. Then I added the following to my assets/app.js:

import { registerVueControllerComponents } from '@symfony/ux-vue';
import naive from 'naive-ui';

...

document.addEventListener('vue:before-mount', (event) => {
    const app = event.detail.app;
    app.use(naive);
});

registerVueControllerComponents();

In the template I tried to add a simple component like “n-divider”:

<div {{ vue_component('n-divider') }}></div>

I get the error: Vue controller "n-divider" does not exist

So how can you use components from an external package?