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