Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wx-dongxing/unplugin-web-components
Building vue3 components to webComponents on vite
https://github.com/wx-dongxing/unplugin-web-components
vite vue3 webcomponents
Last synced: about 4 hours ago
JSON representation
Building vue3 components to webComponents on vite
- Host: GitHub
- URL: https://github.com/wx-dongxing/unplugin-web-components
- Owner: WX-DongXing
- License: mit
- Created: 2022-11-07T09:52:59.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-11T10:34:49.000Z (about 2 years ago)
- Last Synced: 2024-11-18T16:21:43.122Z (about 16 hours ago)
- Topics: vite, vue3, webcomponents
- Language: TypeScript
- Homepage:
- Size: 68.4 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-web-components
Building vue3 components to webComponents on vite
## Install
```bash
npm i -D unplugin-web-components
```
## Use
`lib/index.ts`
```typescript
import { defineCustomElement } from 'vue'
import { styles } from 'virtual:unplugin-web-components'
import Example from '@/components/Example.vue'
const WCExample = defineCustomElement(Object.assign(WCExample, { styles }))
customElement.define('wc-example', WCExample)
```
`env.d.ts`
```typescript
declare module 'virtual:unplugin-web-components' {
export const styles: string[]
}
```
`vite.config.ts`
```typescript
import vue from '@vitejs/plugin-vue'
import WebComponents from 'unplugin-web-components/vite'
export default defineConfig({
define: { 'process.env.NODE_ENV': '"production"' },
plugins: [vue(), WebComponents()],
build: {
lib: {
name: 'WCExample',
formats: ['es', 'umd']
entry: resolve(__dirname, 'lib/index.ts'),
fileName: (format) => `wc-example.${format}.js`,
}
}
})
```
Vite
```ts
// vite.config.ts
import WebComponents from 'unplugin-web-components/vite'
export default defineConfig({
plugins: [
WebComponents({
/* options */
})
]
})
```
Example: [`playground/`](./playground/)
Rollup
```ts
// rollup.config.js
import WebComponents from 'unplugin-web-components/rollup'
export default {
plugins: [
WebComponents({
/* options */
})
]
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-web-components/webpack')({
/* options */
})
]
}
```
Nuxt
```ts
// nuxt.config.js
export default {
buildModules: [
[
'unplugin-web-components/nuxt',
{
/* options */
}
]
]
}
```
> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-web-components/webpack')({
/* options */
})
]
}
}
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import WebComponents from 'unplugin-web-components/esbuild'
build({
plugins: [WebComponents()]
})
```
## License
[MIT](https://github.com/WX-DongXing/unplugin-web-components/blob/main/LICENSE)
Copyright (c) 2022 Dong Xing