Please consider donating to this project's author, EGOIST, to show your ❤️ and support.
Features
- 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!
Table of Contents
Install
yarn add styled-vue --dev
Then register the Vue plugin (optional):
Vue
So far the plugin is only required for globalStyle, if you only need scoped style, you can safely skip this.
Example
<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.
How to use
Using with webpack
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
:
moduleexports = module: rules: test: /\.vue$/ loader: 'vue-loader' options: compiler: // <- here
Using with Vue CLI
In your vue.config.js
:
moduleexports = { configmodule }
Using with Poi
In your poi.config.js
:
moduleexports = plugins: 'styled-vue/poi'
Using with Nuxt.js
In your nuxt.config.js
:
modules: 'styled-vue/nuxt'
How does it work
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.
CSS Preprocessors
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>
.
Global Styles
Use globalStyle
instead of style
on your component:
globalStyle: css` body { color: ; } `
globalStyle
relies on the Vue plugin, make sure to register it first:
Vue
For Nuxt users we automatically register it for you.
This only adds ~100 bytes to your application.
TypeScript
We use Babel to parse your code, so TypeScript should work out-of-the-box, however there're some caveats.
Editor Plugins
VSCode
- Syntax Highlighting - language-babel
- Autocompletion - vscode-styled-components
- Linting - stylelint
Atom
- Syntax Highlighting and Autocompletion - language-babel
Inspirations
Contributing
- 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
Author
styled-vue © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).
Website · GitHub @EGOIST · Twitter @_egoistlily