ATTENTION: this project is not actively maintained for now (I still push some code once in a while), if you want to see improvements or get support, please consider sponsoring me.
NPM version NPM downloads CircleCI chat
Please consider donating to this project's author, EGOIST, to show your ❤️ and support.
- Zero-runtime CSS-in-JS for Vue SFC without compromise
- Scoped CSS by default
- CSS preprocessors support
- Dynamic style just works (no IE support)
- Working with SSR out-of-the-box
- Hot module replacement still works
- You get all the features without any config!
yarn add styled-vue --dev
Then register the Vue plugin (optional):
import Vue from 'vue' import { StyledVue } from 'styled-vue' Vue.use(StyledVue)
So far the plugin is only required for globalStyle, if you only need scoped style, you can safely skip this.
<template> <div><h1 class="title">hello there!</h1></div> </template> <script> import { css } from 'styled-vue' import { modularScale } from 'polished' export default { style: css` .title { /* You can access component's "this" via "vm" */ color: ${vm => vm.$store.state.themeColor}; font-size: ${modularScale(2)}; margin: 0; } ` } </script>
And that's it, it's like writing .vue file's scoped CSS in the <script> tag.
I did say that styled-vue works without config, that might be a clickbait because you do need a single line of config in your webpack.config.js:
module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { compiler: require('styled-vue/compiler') // <- here } } ] } }
In your vue.config.js:
module.exports = { chainWebpack(config) { config.module .rule('vue') .use('vue-loader') .tap(options => { options.compiler = require('styled-vue/compiler') // <- here return options }) } }
In your poi.config.js:
module.exports = { plugins: ['styled-vue/poi'] }
In your nuxt.config.js:
export default { modules: ['styled-vue/nuxt'] }
Input:
<template> <h1>hello</h1> </template> <script> import { css } from 'styled-vue' export default { style: css` h1 { color: ${vm => vm.color}; width: ${200 + 1}px; } ` } </script>
Output:
<template> <h1 :style="$options.style(this)">hello</h1> </template> <script> export default { style: function(vm) { var v0 = vm => vm.color var v1 = 200 + 1 return { '--v0': v0(vm), '--v1': v1 + 'px' } } } </script> <style scoped> h1 { color: var(--v0); width: var(--v1); } </style>
Under the hood, it uses CSS variables for dynamic styles, that's why this feature is not supported in IE.
import { less, sass, scss, stylus } from 'styled-vue'
Just use corresponding exports from styled-vue.
The CSS will be passed to vue-loader and parsed by PostCSS if a postcss.config.js exists in your project, so it really just works like <style scoped>.
Use globalStyle instead of style on your component:
import { css } from 'styled-vue' export default { globalStyle: css` body { color: ${vm => vm.bodyColor}; } ` }
globalStyle relies on the Vue plugin, make sure to register it first:
import Vue from 'vue' import { StyledVue } from 'styled-vue' Vue.use(StyledVue)
For Nuxt users we automatically register it for you.
This only adds ~100 bytes to your application.
We use Babel to parse your code, so TypeScript should work out-of-the-box, however there're some caveats.
- Syntax Highlighting - language-babel
- Autocompletion - vscode-styled-components
- Linting - stylelint
- Syntax Highlighting and Autocompletion - language-babel
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
styled-vue © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).
Website · GitHub @EGOIST · Twitter @_egoistlily