Deprecated!

This project has not been maintained for a while. Matthew Wagerfield created a new and more advanced version which has been published with the same name: wagerfield/vue-fela.

If you want to use the old version just install [email protected].

vue-fela

Fela bindings for vue

Installation

npm install --save vue-fela

Usage

Bundler (Webpack, Rollup)

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

const felaConfig = {
  /* ... */
}

Vue.use(getFelaPlugin(felaConfig))

Browser

<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vue-fela/dist/vue-fela.css"></link>
<script src="vue-fela/dist/vue-fela.js"></script>

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vue-fela/dist/vue-fela.css"></link>
<script src="https://unpkg.com/vue-fela"></script>

Usage in component

index.vue

<template>
<div :class="styles.box">
  Some Stuff
</div>
</template>

<script>
import { renderStyles } from 'vue-fela'
import styles from './style.js'

export default {
  computed: {
    styles: renderStyles(styles)
  }
}
</script>

style.js

var styles = {
  box: {
    display: 'block',
    textAlign: 'left',
    fontFamily: 'Helvetica',
    fontWeight: 600,
    fontSize: 32,
    color: 'black',
    marginTop: 10
  }
}

export default styles

Nuxt Server rendering

Just use the <fela-provider/> component at the end of rendering.

In nuxtjs I personally use it in the layouts:

layouts/default.vue

<template>
  <div>
    <nuxt/>
    <fela-provider/>
  </div>
</template>

Development

Launch visual tests

npm run dev

Launch Karma with coverage

npm run dev:coverage

Build

Bundle the js and css of to the dist folder:

npm run build

Publishing

The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publish

License

MIT