It is more convenient to use v-bind in 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()
<style scoped>
.move{
transform:translateX(v-bind(move)px);
width: v-bind(move) * 10px;
}
</style>
<style scoped>
.move{
transform:translateX(calc(v-bind(move) * 1px));
width: calc(v-bind(move) * 10px);
}
</style>Vite
// vite.config.ts
import { vitePlugin } from 'unplugin-v-bind'
export default defineConfig({
plugins: [vitePlugin(/* options */)],
})Rollup
// rollup.config.js
import { resolve } from 'path'
import { rollupPlugin } from 'unplugin-v-bind'
export default {
plugins: [rollupPlugin(/* options */)],
}Webpack
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-v-bind').webpackPlugin({
/* options */
}),
],
}Vue CLI
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-v-bind').webpackPlugin({
/* options */
}),
],
},
}Esbuild
// esbuild.config.js
import { build } from 'esbuild'
import { esbuildPlugin } from 'unplugin-v-bind'
build({
plugins: [esbuildPlugin(/* options */)],
})
