vc-style
v1.0.1
Published
Dynamic style tag component for #VueJs making any property/value pairs inside of it observable
Downloads
12
Maintainers
Readme
vc-style
Dynamic
<style></style>
tag component for VueJs making any property/value pairs inside of it observable. Developed by Martin Ivanov.
Installation
$ npm install vc-style --save
Usage
// in main.js, use globally
import VcStyle from 'vc-style'
Vue.use(VcStyle)
// as a component in another component
import VcStyle from 'vc-style'
export default {
name: 'app',
components: {
VcStyle
},
data () {
return {
color: '#fff',
bgColor: '#b00'
}
}
}
And then use like this:
<vc-style>
body
{
color: {{ color }};
background: {{ bgColor }};
}
</vc-style>
The above will render normal <style></style>
tag with all property/value pairs observable:
<style>
body
{
color: #fff;
background: #b00;
}
</style>
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run all tests
npm test
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
Credits
Developed by Martin Ivanov and available on BitBucket and on NPM. Check the demo here.