vue-styletron's Introduction

vue-styletron

Styletron for Vue.js

Install

Add dependency

npm install vue-styletron --save or yarn add vue-styletron

Initialize plugin

import VueStyletron from 'vue-styletron'

Vue.use(VueStyletron)

Usage

Define `style` in data, use `v-style` in template

new Vue({
  el: '#el',
  data: {
    style: {
      el: {
        color: 'white'
      }
    }
  }
  template: '<div v-style="el">White text</div>'
})

// Styletron generated style:
// .a {
//   color: white
// }

// Vue rendered template:
// <div class="a">White text</div>

vue-styletron's People

Stargazers

Watchers

vue-styletron's Issues

Not typical usage

How can i use this package, if structure of my project looks like this?

Console
--index.vue
--script.js
--style.styl
--template.html

My vue file:

<style src="./style.styl" lang="stylus"></style>
<script src="./script.js"></script>
<template src="./template.html"></template>

I thought that i need something like this
<div v-style="list"> and .list {margin-top: -20px}, like css modules work, but its not.

I'm new to Vue.js, so I can not figure it out

Also, after importing this package I got an error ERROR in main.js from UglifyJs Unexpected token punc «(», expected punc «:» because You use es6 syntax

Property or method is not defined on the instance but referenced during render

Cool project my dude.
I think there is a problem with the implementation that causes an annoying warning though.
Why not just call injectStyle on a directive hook instead of on the component's create hook?

Recommend Projects