Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matteogabriele/vue-component-observer
Plugin for responsive components
https://github.com/matteogabriele/vue-component-observer
breakpoints eqcss responsive-design vue
Last synced: 3 months ago
JSON representation
Plugin for responsive components
- Host: GitHub
- URL: https://github.com/matteogabriele/vue-component-observer
- Owner: MatteoGabriele
- License: mit
- Created: 2019-07-08T11:49:30.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-07T06:13:26.000Z (over 1 year ago)
- Last Synced: 2024-04-25T18:20:47.954Z (9 months ago)
- Topics: breakpoints, eqcss, responsive-design, vue
- Language: JavaScript
- Size: 97.7 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-component-observer
Plugin for responsive components
### Installation
```bash
yarn add vue-component-observer
```
### Usage
```js
import VueComponentObserver from "vue-component-observer";
Vue.use(VueComponentObserver);
```
Declare the component breakpoints in the root of the component itself and then use the `$eq` property to render these computations.
```vue
medium
small
export default {
name: "MyComponent",
breakpoints: {
medium: {
minWidth: 600,
},
large: {
minWidth: 1200,
},
},
};
```
### Use Observer component
Use the built-in Observer component
```vue
medium
small
const breakpoints = {
medium: {
minWidth: 600,
},
};
```
### Props list
#### tag
What tag the Observer component should render
default: 'div'
#### slim
Render or not a node element
default: false
#### breakpoints
Observer breakpoints. Supports: minWidth, maxWidth, minHeight and maxHeight
default: null
### Local usage
```vue
medium
small
import { Observer } from "vue-component-observer";
const breakpoints = {
medium: {
minWidth: 600,
},
};
```
```vue
medium
small
import { ObserverMixin } from "vue-component-observer";
export default {
name: "MyComponent",
mixins: [ObserverMixin],
breakpoints: {
medium: {
minWidth: 600,
},
large: {
minWidth: 1200,
},
},
};
```