styled-vue
Please consider donating to this project's author, EGOIST, to show your
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
Example
<template>
<div><h1 class="title">hello there!</h1></div>
</template>
<script>
import { css } from 'styled-vue'
export default {
style: css`
.title {
/* You can access component's "this" via "vm" */
color: ${vm => vm.$store.state.themeColor};
}
`
}
</script>
And that's it, it's like writing .vue
file's scoped CSS in the <script>
tag.
How to use
Use 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
:
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compiler: require('styled-vue/compiler') // <- here
}
}
]
}
}
Use with Vue CLI
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
})
}
}
Use with Poi
Guess what, it's the same as Vue CLI :)
CSS Preprocessors
import { css, less, sass, scss, stylus } from 'styled-vue'
Just use corresponding exports from styled-vue
.
Global Styles
I think you should not do this, but I'm open for other thoughts, let's discuss it in issue tracker if you want this feature.
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