https://github.com/gluons/vue-inline-styled

Writing inline CSS style in Vue component with ease.
https://github.com/gluons/vue-inline-styled

hacktoberfest inline inline-css inline-styles style vue vue-library vuejs

Last synced: about 1 month ago
JSON representation

Writing inline CSS style in Vue component with ease.

• Host: GitHub
• URL: https://github.com/gluons/vue-inline-styled
• Owner: gluons
• License: mit
• Created: 2018-11-11T15:18:06.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-11-01T19:31:04.000Z (over 1 year ago)
• Last Synced: 2025-03-26T02:11:18.885Z (11 months ago)
• Topics: hacktoberfest, inline, inline-css, inline-styles, style, vue, vue-library, vuejs
• Language: TypeScript
• Homepage: https://npm.im/vue-inline-styled
• Size: 825 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Vue Inline Styled

[![GitHub](https://img.shields.io/github/license/gluons/vue-inline-styled.svg?style=flat-square)](./LICENSE)

[![npm](https://img.shields.io/npm/v/vue-inline-styled.svg?style=flat-square)](https://www.npmjs.com/package/vue-inline-styled)

[![npm](https://img.shields.io/npm/dt/vue-inline-styled.svg?style=flat-square)](https://www.npmjs.com/package/vue-inline-styled)

[![Codacy grade](https://img.shields.io/codacy/grade/72a6eb06815442548f7cfcbd71d278c4.svg?style=flat-square)](https://www.codacy.com/app/gluons/vue-inline-styled)

[![Travis (.com)](https://img.shields.io/travis/com/gluons/vue-inline-styled.svg?style=flat-square)](https://travis-ci.com/gluons/vue-inline-styled)

[![TSLint](https://img.shields.io/badge/TSLint-gluons-15757B.svg?style=flat-square)](https://github.com/gluons/tslint-config-gluons)

Writing inline CSS style in Vue component with ease.

> Use [style-to-object](https://github.com/remarkablemark/style-to-object) under the hood.

## Installation

**Via npm:**

```bash

npm install vue-inline-styled

```

**Via Yarn:**

```bash

yarn add vue-inline-styled

```

## Usage

```js

import Vue from 'vue';

import inlineStyled from 'vue-inline-styled';

import MyComponent from './components/MyComponent.vue';

const StyledMyComponent = inlineStyled(MyComponent)`

	color: red;

	font-size: 20px;

	background-color: yellow;

`;

new Vue({

	el: '#app',

	// Component will be renderred with inline style

	render: h => h(StyledMyComponent)

});

```