A high-performant and framework-agnostic toolbelt to handle state-driven styling in vue

fela-vue

Fela mixin for Vue designed for flexibility yet team-oriented.

Fela does the great job, but it has no idea how to cook it with Vue. This is what I've created after combining vue's :style and :class attributes to make apps dynamically configured and easiest to write and maintain.

USAGE

More about plugins. Several basic are already built in here!

More about enhancers.
I suggest to look at this one first to have nice-looking classes during development.

Usage with literal css (lit-css) from this package

In the options object below you can also add other Renderer options

// All of the options are optional.
const options = {
  // Default styles to mix. Does not mix if omitted.
  // Have a look at the example below to see it in action.
  // Either pass a function (then key would be `fdef`):
  defStyles: (componentInstance) => ({ colors: { cyan: 'cyan' } }),
  // ... Or an object with your own key:
  defStyles: {
    key: 'fdef',
    value: (componentInstance) => ({ colors: { cyan: 'cyan' } })
  },
  // Name of styling method. Defaults to `f`.
  method: 'f',
  // Additional fela plugins.
  plugins: [],
  // Additional fela enhancers.
  enhancers: [],
  // Preset configurations.
  preset: {
    // Config for fela-plugin-unit. Same defaults ('px', {}).
    unit: ['em', { margin: '%' }]
  },
  // SSR status.
  ssr: false
}

const renderer = new Renderer(options)

// Use globally
Vue.mixin(renderer.mixin)
// ... Or per module
export default {
  mixins: [ renderer.mixin ],
  // ...
}

EXAMPLES

** same options object as above **

WITHOUT SSR

main.js

import Vue from 'vue'
import { Renderer } from 'fela-vue'

Vue.mixin( (new Renderer(options)).mixin )

WITH SSR

entry.server.js is the same as entry.client.js

import Vue from 'vue'
import { Renderer } from 'fela-vue'
// OR const { Renderer } = require('fela-vue')

const renderer = new Renderer({
  ...options,
  // SSR status to `true`.
  ssr: true
})

Vue.mixin(renderer.mixin)

Then just put renderer.style into your template.

Component example

MyComponent.vue

<template>
  <div :class="f('wrapper')">
    <span :class="f('one')"> It's green! </span>
    <span :class="f('two')"> It's cyan! </span>
    <span :class="f('three', {color: 'white'})"> you don't see me! </span>
    <span :class="f({color: 'yellow'})"> I do it by myself! </span>
    <span :class="f('one two, bold')"> Combined classes by commas and spaces </span>
    <span :class="f('bold my-kebab')"> And kebab-case! </span>
    <span :class="f('bold myKebab')"> The same! </span>
    <span :class="f('button one')">
      If class is not in local style(), it will be taken from defaults (defStyles), if present.
      Here's button could be taken from there, then merged with `one`
      where is `one` is in priority: right to left principle.
    </span>
    <div v-for="i in [0,1,2]">
      <span
        :class="f((i) => ({color: ['green', 'blue', 'yellow'][i]}))"
      > This way is OK too. </span>
    </div>
  </div>
</template>

<script>
// Uncomment to use literal css: css`...`
// import { css } from 'fela-vue'

export default {
  computed: {
    style() {
      // Or any other key in `options.defStyles.key`.
      const { colors } = this.fdef

      // Also, it's OK to return one css`...` with all classes included.
      return {
        one: {
          color: 'green'
        },
        two: {
          color: colors.cyan
        },
        three: ({color}) => {
          fontWeight: 'bold',
          color
        },
        bold: () => ({
          fontWeight: 'bold'
        }),
        // 'my-kebab' is also valid if the same in the template.
        myKebab: {
          color: 'purple'
        },
        anotherClass: css`
          background: grey
        `,
        ...css`
          .other-class {
            margin-top: 44; // still ok for fela. will be 44px.
            // you can comment a whole line,
            margin-left: 22 // this's OK too.
            /* block comments are also supported. */
            :hover {
              // no colons and semicolons are ok.
              background grey
            }
          }
          .anotherOne {
            padding: 15
          }
        `
      }
    }
  }
}
</script>

It's better to make this computed in the end of a component definition or make a const variable at the bottom and return it from the computed prop.

Also, It's very handy to make snippets for adding style() {} to computed.