Component Libraries

Vue Designer uses an open JSON standard called Web-Types (maintained by JetBrains) to provide an enhanced experience for numerous component libraries. Vue Designer’s library panel displays all the components from the web-types.json file of these component libraries for your to refer and drag-and-drop them into your page.

All major component libraries in the Vue ecosystem already support web-types.

• Vuetify
• Quasar
• Naive-UI
• PrimeVue
• Ionic-Vue
• Framework7-Vue
• Element-Plus
• Ant-Design-Vue
• Vant-UI
• Bootstrap Vue

If a component library (it could be your own custom component library) has web-types but is not loaded by Vue Designer, simply add the library’s npm dependency to the plugins array of your liveDesigner config, restart your dev-server and re-open your project in Vue Designer. For eg,

liveDesigner({
    plugins: ['primevue']
})

In order to avoid importing components manually in the script section of the Vue components when using them in your page, you can opt-in to use unplugin-vue-components. Refer to the DX Plugins tab in the Config Panel and follow the instructions to install and configure this package. Please refer to the official documentation of this package to check if it includes auto-import resolvers for your component library. Here is an example using the auto-import resolver for PrimeVue.

// vite.config.ts

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 {PrimeVueResolver} from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    liveDesigner({
      plugins: ['primevue'],
    }),
    vue(),
    // 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$/],

      // resolvers: [], // Auto-import using resolvers
      dts: 'components.d.ts',
      resolvers: [PrimeVueResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})