Enhanced Features

Vine provides some enhanced features, which are some useful syntax sugars.

Transform boolean props

Vue's Boolean Casting mechanism has some bugs in the official implementation, please see this example.

Vine provides special transformation for boolean props, which is credit to Vue Macros by MIT License.

Convert <Comp checked /> to <Comp :checked="true" />.

Convert <Comp !checked /> to <Comp :checked="false" />.

But this feature conflicts with UnoCSS's attribute mode, because when the above rules are applied, <div h-12px /> will be <div h-12px="true" /> on the corresponding DOM node, which will cause the UnoCSS generated CSS code to fail to take effect on that node.

If you want to keep UnoCSS's attribute mode feature, please configure the Vite plugin explicitly to disable this feature:

import { VineVitePlugin } from 'vue-vine/vite'

export default defineConfig({
  plugins: [
    VineVitePlugin({
      vueCompilerOptions: {
        __enableTransformBareAttrAsBool: false,
      },
    }),
  ],
})