Integrating Nextcloud Vue Components with Pinegrow's VueDesigner in a Vite Project

I'm trying to integrate Pinegrow's VueDesigner with my Nextcloud app to include Nextcloud Vue components in a Vue 3 project built with Vite. The motivation is huge, but I am facing issues combining these tools.

I am using Nextcloud's @nextcloud/vue (alpha version 9.0.0 is available, though my package.json specifies alpha 5) along with Vue 3 and vue-router. My package.json includes:

JSONCopied
"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 (using Vite with plain CSS, no framework) and followed these instructions: Vue Component Libraries to add Nextcloud/vue as a component library. This involved creating a web-types file and referencing it in the liveDesigner plugins section of vite.config.ts (see below).

After installing the npm packages and launching the Vite dev server, the project can be edited in VueDesigner. Nextcloud components are available via drag-and-drop and their properties can be edited. However, the NC components never appear in the live preview either in VueDesigner or the browser.

The problem is that no Nextcloud component actually reaches the browser. I suspect I need to correctly instruct Vite to include the NC/vue components. I'm a bit lost on how to integrate the entries proposed by Nextcloud when importing '@nextcloud/vite-config'. For example, I tried the following:

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

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

and combined it with the vite.config.ts generated by VueDesigner, adapted as discussed below:

TYPESCRIPTCopied
/// <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 VueDesigner 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)),
    },
  },
})

I'm looking for guidance on how to properly configure Vite to bundle and display the Nextcloud Vue components in the browser. Any help is much appreciated.