Styletron for Vue.js

Overview

vue-styletron

Travis David David npm

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>
You might also like...
Vue 3 example without any transpiler with vue-router

Vue-Next-Example Your application code is not compiled at all, you save and reload your browser like in the good old times 😁 . Components are loaded

Clone Rocketseat UI with Vue JS, Bootstrap Vue and SCSS

rocketseat Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lint

Vue 3 example by a CRUD app with Axios, Vue Router, Bootstrap
Vue 3 example by a CRUD app with Axios, Vue Router, Bootstrap

Vue 3 example with Axios & Vue Router: Build CRUD App Build a Vue.js 3 CRUD example to consume REST APIs, display and modify data using Axios and Vue

 Movue - Movie, Series Search Engine developed using omdb api with Vuejs. Vue Router, Vue Resource, Vuex
Movue - Movie, Series Search Engine developed using omdb api with Vuejs. Vue Router, Vue Resource, Vuex

A project developed using omdb api with Vuejs. Vue Router, Vue Resource, Vuex were used in the development process

Shoe Shopping Cart - Vue.js Reengen FullStack Bootcamp - Vue.js & Node.js Bootcamp
Shoe Shopping Cart - Vue.js Reengen FullStack Bootcamp - Vue.js & Node.js Bootcamp

Shoe Shopping Cart - Vue.js Reengen FullStack Bootcamp - Vue.js & Node.js Bootcamp Week-1 project Live Demo Link 1 Link 2 Whats's This Project About F

Application that provides weather information of provinces with Vue.js / Weather info in Turkey with Vue.js

# weather_app ## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run serve ``` ### Compiles and minifies for

Vue-weather - This is a web application made using a vue js Framework which displays the weather according to the city.

vue-weather Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints an

Vue-js-movie-catalogue - Wookie Movie - A movie catalogue app using Vue.js
Vue-js-movie-catalogue - Wookie Movie - A movie catalogue app using Vue.js

Wookie Movie - A movie catalogue app using Vue.js Features: Listing movie elemen

Vue-movie - Vue Movie Search with OMDB API
Vue-movie - Vue Movie Search with OMDB API

VUE MOVIE SEARCH You can find your favorite movies Languages and Tools Vue Js Vu

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

    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?

    opened by ianwalter 0
  • Not typical usage

    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

    opened by ephor 0
Owner
Emanuele
frontender. bone-breaking, mind-opening music listener, creator and organizer. Ⓥ, bouldering, cycling, yoga, phylosophy, diy, design.
Emanuele
Zhihudaily demo built with Vue 2.0, vue-router & vuex, with server-side rendering

vue-zhihudaily-2.0 Zhihudaily demo built with Vue 2.0 + vue-router + vuex, with server-side rendering. 主要参考 vue-hackernews-2.0 . Live Demo Features Se

好多大米 109 Jul 28, 2020
SPA about vue-cli+adminLte+vue-router

vue-adminLte-vue-router by liujians http://liujians.me 最近在整合的vue+vue-router+adminLte,用来做响应式的比较美观的SPA管理系统 项目路径:https://github.com/liujians/vue-adminLte

刘剑 367 Oct 31, 2022
Using Vue.js for memo web App. webpack, vuex, vue-router, Firebase.

Dependencies Vue.js(>2.x.) vue-router(>2.x.) vuex(>2.x.) vuex-router-sync(>3.x.) @next Firebase(>3.6.x) marked(>0.3.x) webpack(>1.13.x) babel-core(>6.

Akiho Nagao 95 Nov 16, 2022
vuejs and Django integration with hot code reload. Dont use this, use https://github.com/NdagiStanley/vue-django or https://github.com/gtalarico/django-vue-template

hello-vue + Django This is a boilerplate project for using vuejs with Django. Features Django backend in ./backend vuejs (v2) frontend in ./frontend H

Rokas Kupstys 329 Dec 8, 2022
⚡ Vue - Laravel - Example is a simple example to set Vue with Laravel.

创造不息,交付不止 Vue - Laravel - Example Vue - Laravel - Example is a simple example to set Vue 2.0 with Laravel 5.1. Install Clone the project to local git

Jiajian Chan 163 Nov 14, 2022
A Vue.js 2.x Boilerplate with Vuex, vue-router AND Bulma

Vue 2.x Boilerplate A Vue.js project with Vuex, vue-router AND Bulma Build Setup # install dependencies yarn # serve with hot reload at localhost:808

Hoony Chang 25 Jul 7, 2021
Simple chart page that uses Element UI, Vue Router and Vue Chart

vue-chart-starter-kit Simple chart page that uses Element UI, Vue Router and Vue Chart Demo Build Setup # install dependencies npm install # serve wi

Captain Pangyo 23 Jul 28, 2020
基于 Vue & Koa 的 WebDesktop 视窗系统 The WebDesktop system based on Vue

X-WebDesktop-Vue 基于 Vue 的 WebDesktop 系统 Version FrontEnd API Electron 3.x 3.x 3.x 2.0.0 2.0.0 2.0.0 1.0.1 1.0.1 - 1.0.0 - - Documentation 中文文档 (2.0.0)

葡萄干@吐鲁番 384 Dec 10, 2022
Vue.js + Vue Router + Vuex in a simple Stock Trading game

Vue.js Stock Trader Game A simple game created for learning the Vue.js ecosystem. This project makes use of following: Modules: Vue.js - Framework Vue

Jacob Sarnowski 41 Dec 10, 2022
Template AspNetCore with Vue, Vue router, Vuex, TypeScript, Bulma, Sass and Jest

ASP.NET Core 3.1 multi-page Vue.js with TypeScript template The repository contains template using Vue.js, Vuex, Vue router, TypeScript, Bulma and SAS

Danijel Hrček 226 Dec 6, 2022