Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/zephraph/vue-context-api
- Owner: zephraph
- License: mit
- Created: 2018-05-13T03:09:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-05-22T06:27:23.000Z (over 6 years ago)
- Last Synced: 2024-10-12T21:05:41.430Z (about 1 month ago)
- Topics: component, context, context-api, inject, provide, vue, vuejs
- Language: JavaScript
- Size: 74.2 KB
- Stars: 23
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
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'
}
}
}```