Nextcloud and VueDesigner

Question

I am trying to get Pinegrow's VueDesigner to work with a Nextcloud app I am writing. The incentive is huge but so are my problems of bringing the two together.

Nextcloud will use Vue 3 only in future versions but @nextcloud/vue alpha 9.0.0 is already out and seems useable. My package.json uses these:

"dependencies": {
    "@nextcloud/vue": "^9.0.0-alpha.5",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@nextcloud/browserslist-config": "^3.0.1",
    "@nextcloud/vite-config": "^2.3.0",
    "vite": "^6"
  }

In VueDesigner I created a new project (vite and plain CSS, no framework). Next I followed these instructions to include nextcloud/vue as a vue component library by creating a web-types file and adding a reference to it in the liveDesigner plugins section of vite.config.ts (see below).

After installing the npm packages and starting the vite dev server the new project can be edited in VueDesigner. NC components can be added the usual way by dragging-and-dropping or via conext menus. Properties of the added components get shown and can be edited. Fine.

Problem is the NC components don't show either in ViewDesigner or in a browser. Inspection of loaded components indicates that no NC component ever reaches the browser.

So I am looking for the right way of telling vite to include NC/vue components. Sorry, I am a complete newbie with vite. I tried importing @nextcloud/vite-config but don't know to integrate the NC proposed entries

import { createAppConfig } from '@nextcloud/vite-config'

export default createAppConfig({
    // entry points: {name: script}
    main: 'src/main.js',
    settings: 'src/settings.js',
})

with the vite.config.ts as inherited from the created VueDesigner project and adapted as discussed above:

/// <reference types="vite-ssg" />

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import { liveDesigner } from '@pinegrow/vite-plugin'
import AutoImportComponents from 'unplugin-vue-components/vite'
import AutoImportAPIs from 'unplugin-auto-import/vite'
import VueRouter from 'unplugin-vue-router/vite'
import { VueRouterAutoImports } from 'unplugin-vue-router'
import Layouts from 'vite-plugin-vue-layouts'
import Unocss from 'unocss/vite'
import presetIcons from '@unocss/preset-icons'
import { unheadVueComposablesImports } from '@unhead/vue'

import VueDevTools from 'vite-plugin-vue-devtools'

// import { visualizer } from 'rollup-plugin-visualizer'

import { createAppConfig } from '@nextcloud/vite-config'

// https://vitejs.dev/config/
export default defineConfig({
  ssgOptions: {
    beastiesOptions: {
      // E.g., change the preload strategy
      preload: 'media',
      // Other options: https://github.com/danielroe/beasties#usage
    },
  },
  plugins: [
    VueRouter({
      // routesFolder: 'src/pages', // default
      dts: 'typed-router.d.ts',
    }),
    VueDevTools(),
    // IMPORTANT: Vue must be placed after VueRouter() 
    Vue({
      include: [/\.vue$/, /\.md$/],
    }),
    Layouts(),
    // For details, refer to https://github.com/antfu/unplugin-auto-import#configuration
    AutoImportAPIs({
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
        /\.mdx$/, // .mdx
      ],
      imports: [
        'vue',
        VueRouterAutoImports, // Remove 'vue-router',
        // 'vue-i18n',
        // 'vue/macros',
        unheadVueComposablesImports,
        '@vueuse/core',
        'pinia',
      ],
      dirs: [
        // Please ensure that you update the filenames and paths to accurately match those used in your project. 

        'src/composables',
        // 'src/utils',
        'src/stores',
        '**/pg-*/**', // To auto-import composables from Vue Designer plugins.
      ],
      vueTemplate: true,
      dts: 'auto-imports.d.ts',
    }),
    // For details, refer to https://github.com/antfu/unplugin-vue-components#configuration
    AutoImportComponents({
      // Please ensure that you update the filenames and paths to accurately match those used in your project. 

      dirs: ['src/components'],

      // allow auto load markdown components under ./src/components/
      extensions: ['vue', 'md'],

      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/, /\.mdx?/],

      // resolvers: [], // Auto-import using resolvers
      dts: 'components.d.ts',
    }),
    Unocss({
      presets: [
        presetIcons({
          prefix: 'i-', // default prefix, do not change
        }),
      ],
      content: {
        pipeline: {
          include: ['./src/**/*'],
        },
      },
    }),
    liveDesigner({
      iconPreferredCase: 'unocss',
      // default value (can be removed), unocss by default uses the unocss format for icon names
      plugins: [
         {
           name: 'Nextcloud Vue 9.0 alpha',
           key: 'nextcloud',
           pluginPath: fileURLToPath(
             new URL('./web-types/nextcloud-vue-lib.json', import.meta.url),
           ),
         },
       ],
    }),
  ],

  // build: {
  //   // Vite uses Rollup under the hold, so rollup options & plugins can be used for advanced usage
  //   rollupOptions: {
  //     plugins: [visualizer()],
  //   },
  // },

  resolve: {
    alias: {
      /* Must be either an object, or an array of { find, replacement, customResolver } pairs. */
      /* Refer to: https://vitejs.dev/config/shared-options.html#resolve-alias */
      /* Please ensure that you update the filenames and paths to accurately match those used in your project. */

      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~': fileURLToPath(new URL('./src', import.meta.url)),
      '~~': fileURLToPath(new URL('./', import.meta.url)),
    },
  },
})

Any help is much appreciated.