Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simon-he95/unplugin-v-bind
convenient to use v-bind in vue
https://github.com/simon-he95/unplugin-v-bind
css vue3
Last synced: 4 months ago
JSON representation
convenient to use v-bind in vue
- Host: GitHub
- URL: https://github.com/simon-he95/unplugin-v-bind
- Owner: Simon-He95
- License: mit
- Created: 2023-04-06T03:35:51.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-28T08:29:56.000Z (5 months ago)
- Last Synced: 2024-10-13T06:19:52.582Z (4 months ago)
- Topics: css, vue3
- Language: Vue
- Homepage:
- Size: 188 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: license
Awesome Lists containing this project
README
It is more convenient to use v-bind in vue
## e.g.
```vue
// use can direct use v-bind(move) with calculate
// you don't need to wrapper with calc()
// because the plugin will auto wrapper it with calc()
.move{
transform:translateX(v-bind(move)px);
width: v-bind(move) * 10px;
}
.move{
transform:translateX(calc(v-bind(move) * 1px));
width: calc(v-bind(move) * 10px);
}
```
## 🌈 Usage
Vite
```ts
// vite.config.ts
import { vitePlugin } from 'unplugin-v-bind'
export default defineConfig({
plugins: [vitePlugin(/* options */)],
})
```
Rollup
```ts
// rollup.config.js
import { resolve } from 'path'
import { rollupPlugin } from 'unplugin-v-bind'
export default {
plugins: [rollupPlugin(/* options */)],
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-v-bind').webpackPlugin({
/* options */
}),
],
}
```
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-v-bind').webpackPlugin({
/* options */
}),
],
},
}
```
Esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import { esbuildPlugin } from 'unplugin-v-bind'
build({
plugins: [esbuildPlugin(/* options */)],
})
```
## License
[MIT](./LICENSE) License © 2022 [Simon He](https://github.com/Simon-He95)
