![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
vite-plugin-components
Advanced tools
Readme
On demand components auto importing for Vite
ℹ️ Vite 2 is supported from
v0.6.x
, Vite 1's support is discontinued.
Install
npm i vite-plugin-components -D # yarn add vite-plugin-components -D
Add it to vite.config.js
// vite.config.js
import Vue from '@vitejs/plugin-vue'
import ViteComponents from 'vite-plugin-components'
export default {
plugins: [
Vue(),
ViteComponents()
],
};
That's all.
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>
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.
// vite.config.js
import ViteComponents from 'vite-plugin-components'
export default {
plugins: [
/* ... */
ViteComponents({
globalComponentsDeclaration: true,
}),
],
}
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
.
It just works.
// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
import ViteComponents from 'vite-plugin-components'
export default {
plugins: [
createVuePlugin(),
ViteComponents(),
],
}
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 'vite-plugin-components'
export default {
plugins: [
/* ... */
ViteComponents({
customComponentResolvers: [
AntDesignVueResolver(),
ElementPlusResolver(),
VantResolver(),
]
}),
],
}
You can also write your own resolver easily:
// vite.config.js
import ViteComponents from 'vite-plugin-components'
export default {
plugins: [
/* ... */
ViteComponents({
customComponentResolvers: [
// 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!
The following show the default values of the configuration
ViteComponents({
// relative paths to the directory to search for components.
dirs: ['src/components'],
// valid file extensions for components.
extensions: ['vue'],
// search for subdirectories
deep: true,
// generate `components.d.ts` global declrations,
// also accepts a path for custom filename
globalComponentsDeclaration: false,
// Allow subdirectories as namespace prefix for components.
directoryAsNamespace: false,
// Subdirectory paths for ignoring namespace prefixes
// works when `directoryAsNamespace: true`
globalNamespaces: [],
})
See the Vitesse starter template.
Thanks to @brattonross, this project is heavily inspired by vite-plugin-voie.
MIT License © 2020 Anthony Fu
FAQs
Components auto importing for Vite
We found that vite-plugin-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.