Use with Vue

Fower can be easily used with Vue.js .

Installation#

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:

vue.config.js
module.exports = {
parallel: false,
chainWebpack(config) {
config.module
.rule('vue')
.use('vue-loader')
.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:

<template>
<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>
</div>
</div>
</template>

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

<template>
<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>
</div>
</div>
</template>

IntelliSense#

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

fower-intellisense

Example source code#

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