VueDesigner custom component library integration for Nextcloud

Vue Designer
1

I have started using VueDesigner for designing a Nextcloud application. To use the nextcloud/vue components, I included the npm packages in profile.json and had them installed. I also created a web-types.json file and placed it into my project’s web-types directory. I can now add components in VueDesigner like I would do with any other library, say Vuetify, by using the menu or by right-clicking. Added components show up in the components tree and I can edit their properties.

Problem is that the added components do not show up on the page i.e. they do not get rendered. This is true for both the VueDesigner view and the web page I view in Firefox.

I have the suspicion that vite.js is not configured to pack the @nextcloud/vue components. Is there anything I must do to enable Vite to pack NC components?

Any other suggestions why NC components are not visible while Vuetify components are?

2

Hi @patmin,

Welcome to Vue Designer!

What you are after is the ability to auto-import components on-demand as your drag-and-drop your components into your page. You can easily achieve this with unplugin-vue-components along with a resolver for your library (@nextcloud/vue).

You can follow the instructions on how to install this Vite plugin from your config panel -

Pasted Graphic 7
Pasted Graphic 71646×1626 377 KB

While Vuetify has component auto-import handled through their exclusive vite plugin, other popular libraries ship a “auto import resolver” for their libraries that can be imported & pass on as options to unplugin-vue-components. For eg, primevue, element-plus follow this pattern.

For eg, see Auto Import - PrimeVue for how it works, and you can see how it’s configured in one of our quick start templates here - pg-vue-primevue/vite.config.ts at main · Pinegrow/pg-vue-primevue · GitHub.

Now, I’m not sure if @nextcloud/vue has a resolver for auto-importing components on-demand. You might want to check with them. Ideally the library authors could ship web-types and auto-import resolvers, as they both are open standards beyond usage in Vue Designer.

Meanwhile, like how you created the web-types, you can create your own auto-import resolver for @nextcloud/vue. Here is my quick one:

import type { ComponentResolver } from 'unplugin-vue-components'

/**
 * Resolver for @nextcloud/vue
 *
 * @link https://next--nextcloud-vue-components.netlify.app/
 */
export function NextCloudVueResolver(): ComponentResolver {
  return {
    type: 'component',
    resolve: (name: string) => {
      if (name.match(/^(Nc[A-Z]|nc-[a-z])/))
        return { name, from: '@nextcloud/vue' }
    },
  }
}

I did try scaffolding a @nextcloud/vue app, and looks like their Vue 3 support is still in beta (Last call for `@nextcloud/vue v9` breaking changes · Issue #6384 · nextcloud-libraries/nextcloud-vue · GitHub). So, I had to install the npm add @nextcloud/vue@next, plus two additional packages (without them, it was throwing some errors).

Refer to the last commit in this repo where I setup my own web-types (just the NcButton component) & resolver for @nextcloud/vue.

There is a known HMR issue when working on this sample of mine, but it shouldn’t be an issue in your repo that doesn’t use unplugin-vue-router.

Let me know how you go. Cheers!