Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zephraph/vue-context-api

A react-like context component api for Vue.js
https://github.com/zephraph/vue-context-api

component context context-api inject provide vue vuejs

Last synced: 27 days ago
JSON representation

A react-like context component api for Vue.js

Awesome Lists containing this project

README

        

# vue-context-api

A react-like context component api for Vue.js

## Installation

```
npm install --save vue-context-api
```

or

```
yarn add vue-context-api
```

## Example Usage

See a [live example](https://codesandbox.io/s/nrjz7ky4mp).

**ThemeContext.js**

```javascript
import { createContext } from "vue-context-api";

// The argument passed to createContext is the default context value
export const { Provider, Consumer } = createContext("light");
```

**App.vue**

```html




import ThemedButton from "./ThemedButton";
import { Provider as ThemeProvider } from "./ThemeContext";

export default {
components: {
ThemedButton,
ThemeProvider
}
};

```

**ThemedButton.vue**

```html



import { Consumer as ThemeConsumer } from "./ThemeContext";

export default {
components: {
ThemeConsumer
},
methods: {
setTheme(theme) {
return theme === 'light'
? 'background-color: white'
: 'background-color: black'
}
}
}

```