📲 On-demand components auto importing for Vue

Overview

unplugin-vue-components

NPM version

On-demand components auto importing for Vue.

Features
  • 💚 Supports both Vue 2 and Vue 3 out-of-the-box.
  • ⚡️ Supports Vite, Webpack, Vue CLI, Rollup and more, powered by unplugin.
  • 🏝 Tree-shakable, only registers the components you use.
  • 🪐 Folder names as namespaces.
  • 🦾 Full TypeScript support.
  • 🌈 Built-in resolvers for popular UI libraries.
  • 😃 Works perfectly with unplugin-icons.


Installation

npm i unplugin-vue-components -D

vite-plugin-components has been renamed to unplugin-vue-components, see the migration guide.

Vite
// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})


Rollup
// rollup.config.js
import Components from 'unplugin-vue-components/rollup'

export default {
  plugins: [
    Components({ /* options */ }),
  ],
}


Webpack
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-components/webpack')({ /* options */ })
  ]
}


Nuxt

You don't need this plugin for Nuxt, use @nuxt/components instead.


Vue CLI
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-components/webpack')({ /* options */ }),
    ],
  },
}


Usage

Use components in templates as you would usually do, it will import components on demand and there is no import and component registration required anymore! If you register the parent component asynchronously (or lazy route), the auto-imported components will be code-split along with their parent.

Basically, it will automatically turn this

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

into this

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

TypeScript

To have TypeScript support for auto-imported components, there is a PR to Vue 3 extending the interface of global components. Currently, Volar has supported this usage already, if you are using Volar, you can change the config as following to get the support.

Components({
  dts: true, // enabled by default if `typescript` is installed
})

Once the setup is done, a components.d.ts will be generated and updates automatically with the type definitions. Feel free to commit it into git or not as you want.

Make sure you also add components.d.ts to your tsconfig.json under includes.

Importing from UI Libraries

We have several built-in resolvers for popular UI libraries like Vuetify, Ant Design Vue, and Element Plus, where you can enable them by:

Supported Resolvers:

// vite.config.js
import ViteComponents, {
  AntDesignVueResolver,
  ElementPlusResolver,
  VantResolver,
} from 'unplugin-vue-components/resolvers'

// your plugin installation
Components({
  resolvers: [
    AntDesignVueResolver(),
    ElementPlusResolver(),
    VantResolver(),
  ]
})

You can also write your own resolver easily:

Components({
  resolvers: [
    // example of importing Vant
    (name) => {
      // where `name` is always CapitalCase
      if (name.startsWith('Van'))
        return { importName: name.slice(3), path: 'vant' }
    }
  ]
})

If you made other UI libraries configured, please feel free to contribute so it can help others using them out-of-box. Thanks!

Migrate from vite-plugin-components

package.json

{
  "devDependencies": {
-   "vite-plugin-components": "*",
+   "unplugin-vue-components": "^0.14.0",
  }
}

vite.config.json

- import Components, { ElementPlusResolver } from 'vite-plugin-components'
+ import Components from 'unplugin-vue-components/vite'
+ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    /* ... */
    Components({
      /* ... */

      // `customComponentsResolvers` has renamed to `resolver`
-     customComponentsResolvers: [
+     resolvers: [
        ElementPlusResolver(),
      ],

      // `globalComponentsDeclaration` has renamed to `dts`
-     globalComponentsDeclaration: true,
+     dts: true,

      // `customLoaderMatcher` is depreacted, use `include` instead
-     customLoaderMatcher: id => id.endsWith('.md'),
+     include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
    }),
  ],
}

Configuration

The following show the default values of the configuration

Components({
  // relative paths to the directory to search for components.
  dirs: ['src/components'],

  // valid file extensions for components.
  extensions: ['vue'],
  // search for subdirectories
  deep: true,
  // resolvers for custom components
  resolvers: [],

  // generate `components.d.ts` global declrations, 
  // also accepts a path for custom filename
  dts: false,

  // Allow subdirectories as namespace prefix for components.
  directoryAsNamespace: false,
  // Subdirectory paths for ignoring namespace prefixes
  // works when `directoryAsNamespace: true`
  globalNamespaces: [],

  // filters for transforming targets
  include: [/\.vue$/, /\.vue\?vue/],
  exclude: [/node_modules/, /\.git/, /\.nuxt/],
})

Example

See the Vitesse starter template.

Thanks

Thanks to @brattonross, this project is heavily inspired by vite-plugin-voie.

License

MIT License © 2020-PRESENT Anthony Fu

Comments
  • How to use this with unit tests?

    How to use this with unit tests?

    As this is a vite plugin it won't be utilized when running unit test and all components won't be transformed. Is there any trick to get this working with the vue-test-utils / jest?

    opened by eratio08 18
  • vscode can't

    vscode can't "go to definition" for auto imported vue components

    If discussions were enabled for this project I would have started one instead of creating an issue.

    I love unplugin-vue-components. Given the regularity of directory structure, file naming and auto naming of the components it makes sense just to infer the imports and make them implicit. However, I realized that I often "jump to definition" in vscode. Apparently vscode was doing that based on import statements and doesn't work without them.

    I am hoping that someone who knows how vscode works can provide a solution for this that can be added to unplugin-vue-components.

    opened by julie777 14
  • 使用按需引入时,首次启动服务会依赖预构建style

    使用按需引入时,首次启动服务会依赖预构建style

    image 问题现象: 使用 ant-design-vue + vite ,使用按需引入的方式,当首次启动 vite 服务时会对 style 进行依赖预构建,并且在切换不同路由时如果其他模块有使用到新的组件,页面会卡住直至 dependencies optimized 完成。 疑问: 想知道这个是 vite 的问题还是这个组件的问题呢?有什么办法可以解决吗?

    插件使用: image

    opened by CrabSAMA 11
  • Dynamic component support

    Dynamic component support

    Is this plugin support dynamic components? Such as using <component :is="" /> I tried to use this plugin using dynamic components, but it's not rendering.

    Example:

    <!-- rendered to <mybutton /> -->
    <component :is="'myButton'" />
    
    <!-- correctly rendered -->
    <myButton>
    
    opened by calvin-cg 11
  • 自动引入,引入出现错误

    自动引入,引入出现错误

    //types.ts
    export const enum Flow {
      'START_NODE' = 'START_NODE', 
    }
    
    //test.vue
    impor {Flow} from './types;
    import { reactive } from 'vue';
    const data = reactive({
      kind : Flow.START_NODE
    })
    
    run的时候,auto-imports.d会自动添加 const TART_NODE: typeof import('tdesign-vue-next')['ART_NODE']
    
    终端就会报Internal server error: Failed to resolve import "tdesign-vue-next/es/a-r-t_-n-o-d-e/style" from "src\models\flownodedesigner\flownodedesigner.ts". Does the file exist
    
    看了下https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/tdesign.ts,也没明白为什么出现这样的问题,name.match(/^T[A-Z]/  name是怎么获取的
    opened by ldypgod 10
  • vite run using v0.22.1 gives

    vite run using v0.22.1 gives "Cannot use 'import.meta' outside a module"

    Describe the bug

    Hi, When compiling the vite project after updating to v0.22.1 (v0.22.0 works fine), I am getting the following error:

    SyntaxError: Cannot use 'import.meta' outside a module
        at wrapSafe (internal/modules/cjs/loader.js:1001:16)
        at Module._compile (internal/modules/cjs/loader.js:1049:27)
        at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
        at Object._require.extensions.<computed> [as .js] (.../vite/dist/node/chunks/dep-71eb12cb.js:62910:17)
        at Module.load (internal/modules/cjs/loader.js:950:32)
        at Function.Module._load (internal/modules/cjs/loader.js:790:12)
        at Module.require (internal/modules/cjs/loader.js:974:19)
        at require (internal/modules/cjs/helpers.js:101:18)
        at Object.<anonymous> (C:\...\unplugin-vue-components\dist\vite.js:3:24)
        at Module._compile (internal/modules/cjs/loader.js:1085:14)
    

    The Vite version is: 3.0.4. Let me know if I can provide anything else to help debug.

    Reproduction

    Use vite with v0.22.1

    System Info

    System:
        OS: Windows 10 10.0.19044
        CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
        Memory: 15.68 GB / 31.92 GB
      Binaries:
        Node: 14.20.0 - C:\Program Files\nodejs\node.EXE
        npm: 8.5.4 - C:\Program Files\nodejs\npm.CMD
      Browsers:
        Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.77)
        Internet Explorer: 11.0.19041.1566
    

    Used Package Manager

    npm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.
    bug 
    opened by rezelute 9
  • Volar cannot deduce component type correctly

    Volar cannot deduce component type correctly

    Question

    // package.json
    {
      "name": "xxx",
      "version": "0.0.0",
      "scripts": {
        "dev": "vite",
        "build": "vue-tsc --noEmit && vite build",
        "preview": "vite preview --port 5050",
        "test:unit": "vitest --environment jsdom",
        "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
        "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
        "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
        "preinstall": "npx only-allow pnpm -y",
        "prepare": "husky install",
        "release": "standard-version"
      },
      "dependencies": {
        "@vueuse/core": "^8.2.5",
        "pinia": "^2.0.13",
        "vue": "^3.2.31",
        "vue-router": "^4.0.14"
      },
      "devDependencies": {
        "@arco-design/web-vue": "^2.23.0",
        "@commitlint/cli": "^16.2.3",
        "@commitlint/config-conventional": "^16.2.1",
        "@rushstack/eslint-patch": "^1.1.0",
        "@types/jsdom": "^16.2.14",
        "@types/node": "^16.11.26",
        "@vitejs/plugin-vue": "^2.3.1",
        "@vue/eslint-config-prettier": "^7.0.0",
        "@vue/eslint-config-typescript": "^10.0.0",
        "@vue/test-utils": "^2.0.0-rc.18",
        "@vue/tsconfig": "^0.1.3",
        "cypress": "^9.5.3",
        "eslint": "^8.5.0",
        "eslint-plugin-cypress": "^2.12.1",
        "eslint-plugin-vue": "^8.2.0",
        "husky": "^7.0.4",
        "jsdom": "^19.0.0",
        "less": "^4.1.2",
        "lint-staged": "^12.3.7",
        "prettier": "^2.5.1",
        "standard-version": "^9.3.2",
        "start-server-and-test": "^1.14.0",
        "stylelint": "^14.6.1",
        "stylelint-config-prettier": "^9.0.3",
        "stylelint-config-rational-order": "^0.1.2",
        "stylelint-config-standard": "^25.0.0",
        "stylelint-order": "^5.0.0",
        "typescript": "~4.6.3",
        "unplugin-auto-import": "^0.7.1",
        "unplugin-vue-components": "^0.19.2",
        "vite": "^2.9.1",
        "vitest": "^0.8.1",
        "vue-tsc": "^0.33.9"
      }
    }
    
    // vite.config.ts
    import { fileURLToPath, URL } from 'url'
    
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    import AutoImport from 'unplugin-auto-import/vite'
    import Components from 'unplugin-vue-components/vite'
    import { ArcoResolver } from 'unplugin-vue-components/resolvers'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        vue(),
        AutoImport({
          dts: 'src/auto-imports.d.ts',
          eslintrc: { enabled: true },
          imports: ['vue', 'vue-router', '@vueuse/core']
        }),
        Components({
          dirs: ['src/components'],
          dts: 'src/components.d.ts',
          resolvers: [ArcoResolver({ importStyle: 'less', resolveIcons: true })]
        })
      ],
      resolve: {
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        }
      }
    })
    
    image image image image image

    Solution

    image image
    opened by jsonleex 9
  • How to automatically import components on demand from an UI library?

    How to automatically import components on demand from an UI library?

    If I want to automatically import components on demand from an UI library like ant-design-vue or element-plus , what should I do? Would you give an example in the document?

    opened by yangss3 9
  • 按需引入Element-plus1.2.0-beta.6 无法正确加载样式路径

    按需引入Element-plus1.2.0-beta.6 无法正确加载样式路径

    image 查了文件路径 Element-plus1.1.0
    element-plus/es/components/menu/style/css.js element-plus/es/components/menu/style/css.td.js"; Element-plus1.2.0
    element-plus\es\components\form\style\css.mjs
    element-plus\es\components\form\style\css.d.ts element-plus\es\components\form\style\css.mjs.map

    needs reproduction resolver 
    opened by SmallWhiteRabbit 8
  • When running serve, an error occurs with the error message:Cannot use 'inmport.meta' outside a module

    When running serve, an error occurs with the error message:Cannot use 'inmport.meta' outside a module

    Describe the bug

    When running serve, an error occurs with the error message:Cannot use 'inmport.meta' outside a module image

    Reproduction

    When running serve, an error occurs with the error message:Cannot use 'inmport.meta' outside a module

    System Info

    npm run serve
    

    Used Package Manager

    npm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.
    opened by a17612431418 7
  • !fix: shouldn't using component resolver to resolve directive

    !fix: shouldn't using component resolver to resolve directive

    • breaking change: change to new component resolver interface, and separate resolver based on its type.
    • dynamic import Babel, as peer dependencies.
    • change some anonymous function to named function

    If I use the v-lazy directive it will resolve to la:zy in unplugin-icons's resolver which will cause an error, so I think we should separate the resolver based on its type.

    opened by hannoeru 7
  • 对于 基于element-ui@2+ 二开的组件,在运行之后提示组件并未进行注册

    对于 基于[email protected]+ 二开的组件,在运行之后提示组件并未进行注册

    Describe the bug

    1、项目中基础组件是用的[email protected]+ 2、由于业务有一些定制化操作,所以基于部分的element-ui 组件,进行二次开发封装了一个自己的组件库(这个组件库是基于nodemon 做的一个没有打包功能的一个组件目录集合) 3、二次开发的组件库在根目录有导出的 index.js image image 4、在按照文档配置之后 ,页面提示组件未被注册 相关配置如下: image 报错如下: image 5、项目中在未使用 unplugin-vue-components 之前,可以直接通过 import { xxxx } from "sinosun-operation-ui" 引用二次开发的组件库中的组件。 6、项目中对于 element-ui 和自己二次开发的组件库,有使用 babel-plugin-componentbabel-plugin-import 进行按需加载,相关配置如下: image 7、运行项目之后,项目根目录是有生成 components.d.ts 文件的 image

    8、由于存在样式定制的问题,所以进行主题定制的时候,有进行进行部分 scss 主题变量覆盖。做法为:

    1. 在二开的组件库中,新建一个需要覆盖的 element-theme.scss 变量文件,内容为 element-ui 的主题变量
    2. 在项目中 新建一个 element-variables.scss 文件,引用上述的 element-theme.scss 变量文件,在其后 引入 element-ui 的主题文件
    3. 再在项目入口文件中引入 element-variables.scss 文件
    4. 但是在使用 unplugin-vue-components 自动引入配置之后,定制的样式全部失效

    Reproduction

    相关配置已在 Describe 中展示出来了

    System Info

    System:
        OS: Windows 10 10.0.19043
        CPU: (4) x64 Intel(R) Core(TM) i3-8100 CPU @ 3.60GHz
        Memory: 1.40 GB / 15.83 GB
      Binaries:
        Node: 14.17.6 - C:\Program Files\nodejs\node.EXE
        Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
        npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
      Browsers:
        Chrome: 103.0.5060.134
        Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
        Internet Explorer: 11.0.19041.1566
    

    Used Package Manager

    npm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.
    opened by CasualMing 0
  • fix(tdesign): add pagination-mini resolver

    fix(tdesign): add pagination-mini resolver

    Description

    • Support pagination-mini component for TDesign

    Linked Issues

    • https://github.com/Tencent/tdesign-vue-next/issues/2226

    Additional context

    opened by uyarn 0
  • dirs 路径配置问题

    dirs 路径配置问题

    Describe the bug

    如果 vite.config.ts 使用下面的配置

    ...
    import Components from 'unplugin-vue-components/vite'
    ...
    root: path.join(__dirname, 'src/render')
    ...
    Components({
            dirs: ['src/render/components']
    })
    

    dirs config invalid changed: dirs: ['components'] effective

    Reproduction

    null

    System Info

    System:
        OS: macOS 12.6.1
        CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
        Memory: 35.50 MB / 16.00 GB
        Shell: 5.8.1 - /bin/zsh
      Binaries:
        Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
        Yarn: 1.22.19 - /usr/local/bin/yarn
        npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
      Browsers:
        Chrome: 108.0.5359.124
        Firefox: 106.0.5
        Safari: 16.2
    

    Used Package Manager

    npm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.
    opened by xeunglay 0
  • 配置globs丢失directoryAsNamespace能力

    配置globs丢失directoryAsNamespace能力

    Describe the bug

    // vite:4.0.4
    // unplugin-vue-components:0.22.12
    Components({
      globs: ['src/components/**!(/components/)*.{vue,}'],
      directoryAsNamespace: true
    })
    
    // 结果
    declare module '@vue/runtime-core' {
      export interface GlobalComponents {
        Demo: typeof import('./src/components/test/demo/demo.vue')['default']
        HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
        IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
        IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
        IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
        IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
        IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
        RouterLink: typeof import('vue-router')['RouterLink']
        RouterView: typeof import('vue-router')['RouterView']
        Test: typeof import('./src/components/test/test.vue')['default']
        TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
        WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
      }
    }
    
    Components({
      // globs: ['src/components/**!(/components/)*.{vue,}'],
      directoryAsNamespace: true
    })
    
    // 结果
    declare module '@vue/runtime-core' {
      export interface GlobalComponents {
        HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
        IconsIconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
        IconsIconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
        IconsIconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
        IconsIconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
        IconsIconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
        RouterLink: typeof import('vue-router')['RouterLink']
        RouterView: typeof import('vue-router')['RouterView']
        TestComponents: typeof import('./src/components/test/components/index.vue')['default']
        TestDemoDemo: typeof import('./src/components/test/demo/demo.vue')['default']
        TestTest: typeof import('./src/components/test/test.vue')['default']
        TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
        WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
      }
    }
    

    Reproduction

    null

    System Info

    System:
      OS: macOS 12.6.2
      CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
      Memory: 392.73 MB / 16.00 GB
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
      Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.0/bin/yarn
      npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
      Watchman: 2022.03.21.00 - /usr/local/bin/watchman
    Browsers:
      Chrome: 108.0.5359.124
      Firefox: 100.0.2
      Safari: 16.2
    

    Used Package Manager

    pnpm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.
    opened by UphkcRNqmafQWcSSSSSS 0
  • 无法解析VanTabbarItem组件

    无法解析VanTabbarItem组件

    Describe the bug

    我可以使用vant其他组件,但是在使用vanTabbarItem组件报错 image dts开了,组件已声明,但是就是没法用,不晓得这个问题原因,求解

    Reproduction

    install => configure in vite.config.js(use vantresolver()) => bootstrap => error

    System Info

    System:
        OS: macOS 13.0.1
        CPU: (8) x64 Apple M1 Pro
        Memory: 32.25 MB / 16.00 GB
        Shell: 5.8.1 - /bin/zsh
      Binaries:
        Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
        Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.0/bin/yarn
        npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
    

    Used Package Manager

    npm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.
    opened by Swordder 0
Releases(v0.22.12)
  • v0.22.12(Dec 12, 2022)

       🚀 Features

    • Compatible with @vitejs/plugin-vue2-jsx  -  by @windsonR and @antfu in https://github.com/antfu/unplugin-vue-components/issues/557 (383b1)
    • tdesign: Add exclude option  -  by @Sight-wcg in https://github.com/antfu/unplugin-vue-components/issues/554 (48c33)
    • varlet-ui: Support loading-bar  -  by @haoziqaq in https://github.com/antfu/unplugin-vue-components/issues/566 (1735b)

       🐞 Bug Fixes

    • Use globs option cannot resolve index.vue  -  by @satrong and @antfu in https://github.com/antfu/unplugin-vue-components/issues/536 (f8918)
        View changes on GitHub
    Source code(tar.gz)
    Source code(zip)
  • v0.22.11(Nov 22, 2022)

  • v0.22.10(Nov 22, 2022)

       🐞 Bug Fixes

    • Remove dts spaces  -  by @azaleta and 三咲智子 (Kevin) in https://github.com/antfu/unplugin-vue-components/issues/533 (0f867)
    • varlet-ui: Fix the problem that ImagePreview cannot be imported automatically  -  by @wtto00 in https://github.com/antfu/unplugin-vue-components/issues/544 (c1ffc)
    • vueuse: Remove "use" prefix in directive  -  by @david50407 in https://github.com/antfu/unplugin-vue-components/issues/539 (28864)
        View changes on GitHub
    Source code(tar.gz)
    Source code(zip)
  • v0.22.9(Oct 24, 2022)

       🚀 Features

    • Support vue 2.7  -  by @azaleta in https://github.com/antfu/unplugin-vue-components/issues/529
    • Bootstrap-vue-3 resolver  -  by @VividLemon in https://github.com/antfu/unplugin-vue-components/issues/520

       🐞 Bug Fixes

    • Kebab namespace cannot invert to camel correctly  -  by @qz1543706741 in https://github.com/antfu/unplugin-vue-components/issues/521
    • prime-vue: Add missing row component  -  by @Jogai in https://github.com/antfu/unplugin-vue-components/issues/530
        View changes on GitHub
    Source code(tar.gz)
    Source code(zip)
  • v0.22.8(Oct 5, 2022)

       🚀 Features

    • Remove special char in namespace  -  by @azaleta in https://github.com/antfu/unplugin-vue-components/issues/513
    • Add ionic framework resolver  -  by @mathsgod in https://github.com/antfu/unplugin-vue-components/issues/519
    • arco: Add iconPrefix option for arco resolver  -  by @SharerMax in https://github.com/antfu/unplugin-vue-components/issues/516
    • varlet-ui: Support unplugin-auto-import  -  by @haoziqaq in https://github.com/antfu/unplugin-vue-components/issues/512

       🐞 Bug Fixes

    • Get render start in vue 2 directive  -  by @sxzz in https://github.com/antfu/unplugin-vue-components/issues/518
        View changes on GitHub
    Source code(tar.gz)
    Source code(zip)
  • v0.22.7(Sep 12, 2022)

  • v0.22.6(Sep 12, 2022)

  • v0.22.5(Sep 12, 2022)

       🚀 Features

    • antdv: Add option to support rename package  -  by @Luin-Li and @antfu in https://github.com/antfu/unplugin-vue-components/issues/499
    • element-ui: Add exclude option  -  by @yangyanggu in https://github.com/antfu/unplugin-vue-components/issues/508
    • idux: Add scope supports  -  by @fengxiaodong28 in https://github.com/antfu/unplugin-vue-components/issues/507
    • tdesign: Add new rules for tdesign  -  by @uyarn in https://github.com/antfu/unplugin-vue-components/issues/501
    • vueuse: Support directive import  -  by @azaleta in https://github.com/antfu/unplugin-vue-components/issues/509

       🐞 Bug Fixes

    • bootstrap-vue: Dropdown alias  -  by @kernoeb and @antfu in https://github.com/antfu/unplugin-vue-components/issues/492
    • tdesign: Add resolver color-picker  -  by @power4wu in https://github.com/antfu/unplugin-vue-components/issues/491
        View changes on GitHub
    Source code(tar.gz)
    Source code(zip)
  • v0.22.4(Aug 9, 2022)

  • v0.22.3(Aug 9, 2022)

  • v0.22.2(Aug 8, 2022)

  • v0.22.1(Aug 8, 2022)

  • v0.22.0(Aug 4, 2022)

       🚀 Features

    • Compatible with plugin-vue-jsx  -  by @LiZhequ in https://github.com/antfu/unplugin-vue-components/issues/479
    • devui: Refactor devui resolver  -  by @banlify in https://github.com/antfu/unplugin-vue-components/issues/478
    • tdesign: Add esm option  -  by @KawaiiZapic in https://github.com/antfu/unplugin-vue-components/issues/475
        View changes on GitHub
    Source code(tar.gz)
    Source code(zip)
  • v0.21.2(Jul 26, 2022)

       🚀 Features

    • bootstrap-vue: Add support for aliases and directives  -  by @simonbrunel in https://github.com/antfu/unplugin-vue-components/issues/470
    • element-plus: Add noStylesComponents for resolver options  -  by @dblazhkun in https://github.com/antfu/unplugin-vue-components/issues/471
    • layui-vue: Add new component support  -  by @Sight-wcg in https://github.com/antfu/unplugin-vue-components/issues/455

       🐞 Bug Fixes

    • Handling components without styles for ElementPlusResolver  -  by @dblazhkun in https://github.com/antfu/unplugin-vue-components/issues/468
        View changes on GitHub
    Source code(tar.gz)
    Source code(zip)
  • v0.21.1(Jul 6, 2022)

       🐞 Bug Fixes

    • Parse declaration error  -  by @ycs77 in https://github.com/antfu/unplugin-vue-components/issues/450
    • Missing collapseSamePrefixes option default value  -  by @ycs77 in https://github.com/antfu/unplugin-vue-components/issues/448
    • Lose components types of components.d.ts  -  by @ycs77 in https://github.com/antfu/unplugin-vue-components/issues/447
    • Remove dts empty line  -  by @sxzz and @antfu in https://github.com/antfu/unplugin-vue-components/issues/446
        View changes on GitHub
    Source code(tar.gz)
    Source code(zip)
  • v0.21.0(Jul 1, 2022)

       🚀 Features

    • Support component and directive in same name by @azaleta and @sxzz in https://github.com/antfu/unplugin-vue-components/issues/440
    • Supports directive dts by @sxzz in https://github.com/antfu/unplugin-vue-components/issues/442
        View changes on GitHub
    Source code(tar.gz)
    Source code(zip)
  • v0.20.1(Jun 26, 2022)

  • v0.20.0(Jun 23, 2022)

  • v0.19.9(Jun 16, 2022)

  • v0.19.8(Jun 15, 2022)

  • v0.19.7(Jun 14, 2022)

       🚀 Features

    • Add 'collapseSamePrefixes' option to prevent duplication inside namespaced component name #409
    • arco:
      • Add new component support and fix skeleton problem #407
    • bootstrap-vue:

       ❤️ Contributors

       Thanks to @antfu | @BenediktHeinrichs | @BenediktHeinrichs | @chrisbbreuer | @DrJume | @DrJume | @flsion

        View changes on GitHub
    Source code(tar.gz)
    Source code(zip)
  • v0.19.6(May 27, 2022)

  • v0.19.3(Apr 14, 2022)

  • v0.19.2(Apr 11, 2022)

  • v0.19.1(Apr 10, 2022)

  • v0.19.0(Apr 10, 2022)

    Breaking Changes

    • libraries option has been removed
    • ImportInfo interface redesigned (return type of resolvers)
      • path -> from
      • name -> as
      • importName -> name

    Bug Fixes

    Features

    • support type only global components (857a5ae)
    Source code(tar.gz)
    Source code(zip)
  • v0.18.5(Mar 26, 2022)

  • v0.18.4(Mar 23, 2022)

  • v0.18.3(Mar 19, 2022)

  • v0.18.2(Mar 19, 2022)

Owner
Anthony Fu
A ship in harbor is safe, but that is not what ships are built for.
Anthony Fu
Import types in Vue SFC for defineProps

vite-plugin-vue-type-imports Enables you to import types and use them in your defineProps and defineEmits ⚠️ This Plugin is still in Development and t

wheat 180 Jan 8, 2023
Vite-vue-ts-sample - Sample repo of vue3, vite, and typescript

Vue 3 + Typescript + Vite This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setu

koooge 0 Nov 22, 2022
Auto import APIs on-demand for Vite, Webpack, Rollup and esbuild

unplugin-auto-import Auto import APIs on-demand for Vite, Webpack, Rollup and esbuild. With TypeScript support. Powered by unplugin. without import {

Anthony Fu 1.7k Jan 4, 2023
Prototype of BootstrapVue loader, webpack plugin for automatic components and directives importing for treeshaking.

A Webpack plugin for automatic BootstrapVue components and directives importing, mainly for treeshaking. Reduce the bundle size and achieve even distribution of chunks size, without the need for manual importing each used component.

Maciej Kopeć 13 Mar 4, 2022
A Vue component for importing inline SVG icons from different popular icon packs easily.

A Vue component for importing inline SVG icons from different popular icon packs easily.

Xiaohan Zou 187 Jan 1, 2023
A webpack loader i18n solution for Vue (Nuxt) with auto generated keysA webpack loader i18n solution for Vue (Nuxt) with auto generated keys

vue-i18n-loader - another webpack loader i18n solution for Vue (Nuxt) with auto generated keys. Currently under development, pull requests and suggest

BitApp 0 Feb 7, 2022
A plug-in that imports component library styles on demand

vite-plugin-style-import English | 中文 A plug-in that imports component library styles on demand Why only import styles Because vite itself has importe

Vben 361 Jan 6, 2023
A plug-in that imports component library styles on demand.it is fast

vite-plugin-style-import English | 中文 A plug-in that imports component library styles on demand Why only import styles Because vite itself has importe

Vben 361 Jan 6, 2023
Store specific tweets on the Arweave blockchain on demand

permatweet Store specific tweets on the Arweave blockchain on demand. Develop Node version Make sure to use the node version specified in .nvmrc eithe

Yves Tscherry 3 Jul 11, 2022
Vue2 Component for svg icon, On demand import

Vue2 Component for svg icon, On demand import

徐鹏飞 6 Aug 15, 2022
Vue3, Vuetify 3, Router, Pinia, Pages, Layouts, Auto Import ['components, libs, plugins] , Macros, CSS Shortcuts

Vue 3 + Vite + Vuetify Features ⚡️ Vue 3, Vite 3 - born with fastness ?? File based routing ?? Components auto importing ?? State Management via Pinia

Santiago Aloi 14 Dec 26, 2022
vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications

Vue Instant! vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications. Table of contents Examp

Santiago Blanco 420 Dec 27, 2022
vue-i18n-loader - another webpack loader i18n solution for Vue (Nuxt) with auto generated keys.

vue-i18n-loader - another webpack loader i18n solution for Vue (Nuxt) with auto generated keys. Currently under development, pull requests and suggest

BitApp 0 Feb 7, 2022
Vue Filters Auto Import - Wrapper to define global filters for Vue

Vue Filters Auto Import - Wrapper to define global filters for Vue

José Silva Jr. 0 Aug 26, 2020
Boilerplate for Chrome extension using Vue.js and Webpack with auto-reload enabled.

vue-chrome-extension-boilerplate Boilerplate for Chrome extension using Vue.js and Webpack with auto-reload enabled. Scripts // install dependencies n

Muhammad Ubaid Raza 244 Dec 5, 2022
A Vue.js directive for animating an element from height: auto; to height: 0px; and vice-versa.

v-show-slide A Vue.js directive for animating an element from height: auto to height: 0px and vice-versa. ?? 3kb (1kb gzipped) ?? No dependencies ?? T

Pete Hegman 104 Nov 24, 2022
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

达峰的夏天 139 Dec 23, 2022
Vue Auto Loan Calculator

Vue Auto Loan Calculator

Januartha 5 Oct 17, 2022
A rich text editor as a Vue component, with image and auto-save support

Vue Trix Rich Text Editor A Vue wrapper around the Trix rich-text editor, with support for images and auto-save. Note: No true two-one binding. While

Dymantic Design 35 May 22, 2022