{"id":13682471,"url":"https://github.com/egoist/styled-vue","last_synced_at":"2025-04-04T22:05:47.271Z","repository":{"id":38106146,"uuid":"164632797","full_name":"egoist/styled-vue","owner":"egoist","description":"Use dynamic styles in Vue single-file components.","archived":false,"fork":false,"pushed_at":"2022-12-11T21:04:18.000Z","size":3133,"stargazers_count":420,"open_issues_count":61,"forks_count":27,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-28T21:03:53.838Z","etag":null,"topics":["css","dynamic-styles","it-just-works","poi","vue","webpack","zero-config"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/egoist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"egoist","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-01-08T11:18:36.000Z","updated_at":"2025-03-20T21:49:25.000Z","dependencies_parsed_at":"2023-01-27T07:01:50.022Z","dependency_job_id":null,"html_url":"https://github.com/egoist/styled-vue","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fstyled-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fstyled-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fstyled-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fstyled-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/egoist","download_url":"https://codeload.github.com/egoist/styled-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256110,"owners_count":20909240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dynamic-styles","it-just-works","poi","vue","webpack","zero-config"],"created_at":"2024-08-02T13:01:46.506Z","updated_at":"2025-04-04T22:05:47.255Z","avatar_url":"https://github.com/egoist.png","language":"JavaScript","funding_links":["https://github.com/sponsors/egoist"],"categories":["JavaScript"],"sub_categories":[],"readme":"## 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](https://github.com/sponsors/egoist).\n\n![styled-vue](https://user-images.githubusercontent.com/8784712/50833110-30b41180-138b-11e9-9ddd-20af6afc1747.png)\n\n---\n\n[![NPM version](https://flat.badgen.net/npm/v/styled-vue?scale=1.5)](https://npmjs.com/package/styled-vue) [![NPM downloads](https://flat.badgen.net/npm/dm/styled-vue?scale=1.5)](https://npmjs.com/package/styled-vue) [![CircleCI](https://flat.badgen.net/circleci/github/egoist/styled-vue/master?scale=1.5)](https://circleci.com/gh/egoist/styled-vue/tree/master) [![chat](https://flat.badgen.net/badge/chat%20on/discord/7289DA?scale=1.5)](https://chat.egoist.sh)\n\n**Please consider [donating](https://github.com/sponsors/egoist) to this project's author, [EGOIST](#author), to show your ❤️ and support.**\n\n## Features\n\n- Zero-runtime CSS-in-JS for Vue SFC without compromise\n- Scoped CSS by default\n- CSS preprocessors support\n- Dynamic style just works (no IE support)\n- Working with SSR out-of-the-box\n- Hot module replacement still works\n- You get all the features without any config!\n\n## Table of Contents\n\n\u003c!-- toc --\u003e\n\n- [Install](#install)\n- [Example](#example)\n- [How to use](#how-to-use)\n  - [Using with webpack](#using-with-webpack)\n  - [Using with Vue CLI](#using-with-vue-cli)\n  - [Using with Poi](#using-with-poi)\n  - [Using with Nuxt.js](#using-with-nuxtjs)\n  - [How does it work](#how-does-it-work)\n  - [CSS Preprocessors](#css-preprocessors)\n  - [Global Styles](#global-styles)\n  - [TypeScript](#typescript)\n- [Editor Plugins](#editor-plugins)\n  - [VSCode](#vscode)\n  - [Atom](#atom)\n- [Inspirations](#inspirations)\n- [Contributing](#contributing)\n- [Author](#author)\n\n\u003c!-- tocstop --\u003e\n\n## Install\n\n```bash\nyarn add styled-vue --dev\n```\n\nThen register the Vue plugin (**optional**):\n\n```js\nimport Vue from 'vue'\nimport { StyledVue } from 'styled-vue'\n\nVue.use(StyledVue)\n```\n\nSo far the plugin is only required for [globalStyle](#global-styles), if you only need scoped style, you can safely skip this.\n\n## Example\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\u003ch1 class=\"title\"\u003ehello there!\u003c/h1\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { css } from 'styled-vue'\nimport { modularScale } from 'polished'\n\nexport default {\n  style: css`\n    .title {\n      /* You can access component's \"this\" via \"vm\" */\n      color: ${vm =\u003e vm.$store.state.themeColor};\n      font-size: ${modularScale(2)};\n      margin: 0;\n    }\n  `\n}\n\u003c/script\u003e\n```\n\nAnd that's it, it's like writing `.vue` file's scoped CSS in the `\u003cscript\u003e` tag.\n\n## How to use\n\n### Using with webpack\n\nI 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`:\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          compiler: require('styled-vue/compiler') // \u003c- here\n        }\n      }\n    ]\n  }\n}\n```\n\n### Using with Vue CLI\n\nIn your `vue.config.js`:\n\n```js\nmodule.exports = {\n  chainWebpack(config) {\n    config.module\n      .rule('vue')\n      .use('vue-loader')\n      .tap(options =\u003e {\n        options.compiler = require('styled-vue/compiler') // \u003c- here\n        return options\n      })\n  }\n}\n```\n\n### Using with Poi\n\nIn your `poi.config.js`:\n\n```js\nmodule.exports = {\n  plugins: ['styled-vue/poi']\n}\n```\n\n### Using with Nuxt.js\n\nIn your `nuxt.config.js`:\n\n```js\nexport default {\n  modules: ['styled-vue/nuxt']\n}\n```\n\n### How does it work\n\nInput:\n\n```vue\n\u003ctemplate\u003e\n  \u003ch1\u003ehello\u003c/h1\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { css } from 'styled-vue'\n\nexport default {\n  style: css`\n    h1 {\n      color: ${vm =\u003e vm.color};\n      width: ${200 + 1}px;\n    }\n  `\n}\n\u003c/script\u003e\n```\n\nOutput:\n\n```vue\n\u003ctemplate\u003e\n  \u003ch1 :style=\"$options.style(this)\"\u003ehello\u003c/h1\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  style: function(vm) {\n    var v0 = vm =\u003e vm.color\n    var v1 = 200 + 1\n    return {\n      '--v0': v0(vm),\n      '--v1': v1 + 'px'\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\nh1 {\n  color: var(--v0);\n  width: var(--v1);\n}\n\u003c/style\u003e\n```\n\nUnder the hood, it uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) for dynamic styles, that's why this feature is not supported in IE.\n\n### CSS Preprocessors\n\n```js\nimport { less, sass, scss, stylus } from 'styled-vue'\n```\n\nJust use corresponding exports from `styled-vue`.\n\nThe 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 `\u003cstyle scoped\u003e`.\n\n### Global Styles\n\nUse `globalStyle` instead of `style` on your component:\n\n```js\nimport { css } from 'styled-vue'\n\nexport default {\n  globalStyle: css`\n    body {\n      color: ${vm =\u003e vm.bodyColor};\n    }\n  `\n}\n```\n\n`globalStyle` relies on the Vue plugin, make sure to register it first:\n\n```js\nimport Vue from 'vue'\nimport { StyledVue } from 'styled-vue'\n\nVue.use(StyledVue)\n```\n\n\u003csmall\u003eFor Nuxt users we automatically register it for you.\u003c/small\u003e\n\nThis only adds ~100 bytes to your application.\n\n### TypeScript\n\nWe use Babel to parse your code, so TypeScript should work out-of-the-box, however there're some [caveats](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats).\n\n## Editor Plugins\n\n### VSCode\n\n- Syntax Highlighting - [language-babel](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel)\n- Autocompletion - [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)\n- Linting - [stylelint](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint)\n\n### Atom\n\n- Syntax Highlighting and Autocompletion - [language-babel](https://atom.io/packages/language-babel)\n\n## Inspirations\n\n- [linaria](https://github.com/callstack/linaria)\n- [lit-vue](https://github.com/egoist/lit-vue)\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n## Author\n\n**styled-vue** © EGOIST, Released under the [MIT](./LICENSE) License.\u003cbr\u003e\nAuthored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/styled-vue/contributors)).\n\n\u003e [Website](https://egoist.sh) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@\\_egoistlily](https://twitter.com/_egoistlily)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fstyled-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fegoist%2Fstyled-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fstyled-vue/lists"}