feat(dx): auto resolve vue components

components.d.ts

@@ -0,0 +1,56 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
+    ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
+    FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
+    InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
+    MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
+    MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
+    NAutoComplete: typeof import('naive-ui')['NAutoComplete']
+    NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
+    NCode: typeof import('naive-ui')['NCode']
+    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
+    NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
+    NGrid: typeof import('naive-ui')['NGrid']
+    NH1: typeof import('naive-ui')['NH1']
+    NH3: typeof import('naive-ui')['NH3']
+    NIcon: typeof import('naive-ui')['NIcon']
+    NInput: typeof import('naive-ui')['NInput']
+    NLayout: typeof import('naive-ui')['NLayout']
+    NLayoutSider: typeof import('naive-ui')['NLayoutSider']
+    NMenu: typeof import('naive-ui')['NMenu']
+    NPageHeader: typeof import('naive-ui')['NPageHeader']
+    NResult: typeof import('naive-ui')['NResult']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NTable: typeof import('naive-ui')['NTable']
+    NTag: typeof import('naive-ui')['NTag']
+    NText: typeof import('naive-ui')['NText']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SearchBar: typeof import('./src/components/SearchBar.vue')['default']
+    SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default']
+    TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
+    ToolCard: typeof import('./src/components/ToolCard.vue')['default']
+  }
+}

package.json

@@ -108,6 +108,7 @@
     "start-server-and-test": "^1.15.4",
     "typescript": "~4.5.5",
     "unplugin-auto-import": "^0.15.2",
+    "unplugin-vue-components": "^0.24.1",
     "vite": "^2.9.15",
     "vite-plugin-md": "^0.12.4",
     "vite-plugin-pwa": "^0.11.13",

pnpm-lock.yaml

@@ -225,6 +225,9 @@ devDependencies:
   unplugin-auto-import:
     specifier: ^0.15.2
     version: 0.15.2(@vueuse/core@8.9.4)(rollup@2.79.1)
+  unplugin-vue-components:
+    specifier: ^0.24.1
+    version: 0.24.1(rollup@2.79.1)(vue@3.2.47)
   vite:
     specifier: ^2.9.15
     version: 2.9.15(less@4.1.3)
@@ -7744,6 +7747,35 @@ packages:
       - rollup
     dev: true
 
+  /unplugin-vue-components@0.24.1(rollup@2.79.1)(vue@3.2.47):
+    resolution: {integrity: sha512-T3A8HkZoIE1Cja95xNqolwza0yD5IVlgZZ1PVAGvVCx8xthmjsv38xWRCtHtwl+rvZyL9uif42SRkDGw9aCfMA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.7.2
+      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      chokidar: 3.5.3
+      debug: 4.3.4
+      fast-glob: 3.2.12
+      local-pkg: 0.4.3
+      magic-string: 0.30.0
+      minimatch: 7.4.5
+      resolve: 1.22.1
+      unplugin: 1.3.1
+      vue: 3.2.47
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
   /unplugin@1.3.1:
     resolution: {integrity: sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==}
     dependencies:

src/plugins/naive.plugin.ts

@@ -1,118 +1,3 @@
-import {
-  create,
-  NAlert,
-  NAutoComplete,
-  NButton,
-  NCard,
-  NCode,
-  NCollapse,
-  NCollapseItem,
-  NCollapseTransition,
-  NColorPicker,
-  NConfigProvider,
-  NDatePicker,
-  NDivider,
-  NDropdown,
-  NDynamicInput,
-  NEllipsis,
-  NEmpty,
-  NForm,
-  NFormItem,
-  NGradientText,
-  NGrid,
-  NGridItem,
-  NH1,
-  NH2,
-  NH3,
-  NIcon,
-  NImage,
-  NInput,
-  NInputGroup,
-  NInputGroupLabel,
-  NInputNumber,
-  NLayout,
-  NLayoutSider,
-  NMenu,
-  NMessageProvider,
-  NModal,
-  NP,
-  NPageHeader,
-  NPopconfirm,
-  NProgress,
-  NResult,
-  NScrollbar,
-  NSelect,
-  NSlider,
-  NSpace,
-  NStatistic,
-  NSwitch,
-  NTable,
-  NTag,
-  NText,
-  NTimePicker,
-  NTooltip,
-  NUpload,
-  NUploadDragger,
-  NPopover,
-  NCheckbox,
-} from 'naive-ui';
+import { create } from 'naive-ui';
 
-const components = [
-  NCheckbox,
-  NDynamicInput,
-  NDatePicker,
-  NCode,
-  NGradientText,
-  NScrollbar,
-  NImage,
-  NUploadDragger,
-  NTable,
-  NStatistic,
-  NDivider,
-  NInputGroup,
-  NInputGroupLabel,
-  NTag,
-  NResult,
-  NEllipsis,
-  NPageHeader,
-  NMessageProvider,
-  NLayout,
-  NLayoutSider,
-  NMenu,
-  NDropdown,
-  NH2,
-  NH3,
-  NP,
-  NAlert,
-  NTooltip,
-  NModal,
-  NEmpty,
-  NUpload,
-  NSelect,
-  NAutoComplete,
-  NProgress,
-  NCollapse,
-  NCollapseItem,
-  NSlider,
-  NPopconfirm,
-  NGrid,
-  NGridItem,
-  NButton,
-  NConfigProvider,
-  NCard,
-  NInput,
-  NColorPicker,
-  NInputNumber,
-  NSpace,
-  NH1,
-  NForm,
-  NFormItem,
-  NTimePicker,
-  NText,
-  NIcon,
-  NSwitch,
-  NCollapseTransition,
-  NPopover,
-];
-
-export const naive = create({ components });
+export const naive = create();

vite.config.ts

@@ -7,6 +7,8 @@ import markdown from 'vite-plugin-md';
 import svgLoader from 'vite-svg-loader';
 import { VitePWA } from 'vite-plugin-pwa';
 import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -69,6 +71,9 @@ export default defineConfig({
         ],
       },
     }),
+    Components({
+      resolvers: [NaiveUiResolver()],
+    }),
   ],
   resolve: {
     alias: {