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: about 8 hours 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-09-26T20:50:43.574Z (7 days 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'

    }

  }

}

```