Use with Vue

Fower can be easily used with Vue.js .


First, install fower bindings for vue.

npm install @fower/vue @fower/vue-template-compiler

Config vue-loader#

Then, configure vue-loader compiler option to require('@fower/vue-template-compiler'). We assume you are using vue-cli or nuxt to build Vue App:

module.exports = {
parallel: false,
chainWebpack(config) {
.tap((options) => {
options.compiler = require('@fower/vue-template-compiler')
return options

Note: use with vue-cli, you should set parallel: false in vue.config.js.

Enjoy it#

Now, you can write Atomic Props directly in HTML:

<div toCenterY p-10 w-260 bgWhite rounded-10 shadow>
<img circle-48 src="/img/vue-logo.png" />
<div ml-10>
<div textXL fontBold>Evan You</div>
<span gray800>Creator of Vue.js.</span>

If you don't like Atomic Props, you can use atomic css class instead:

<div class="toCenterY p-10 w-260 bgWhite rounded-10 shadow">
<img src="/img/vue-logo.png" class="circle-48" />
<div class="ml-10">
<div class="textXL fontBold">Evan You</div>
<span class="gray800">Creator of Vue.js.</span>


To get IntelliSense in VS Code, just to install VS Code plugin: Fower IntelliSense.


Example source code#

You can view the example souce code in github: example-vue