vue-media
Like react-media but for Vue.js, and this library is pretty small, it's 969 bytes after minification without gzip.
Install
yarn add vue-media
CDN: https://unpkg.com/vue-media/dist
Usage
<template>
<div id="app">
<media :query="{minWidth: 500}">bigger than 500px</media>
<media :query="{maxWidth: 500}">smaller than 500px</media>
</div>
</template>
<script>
import Media from 'vue-media'
// Component is automatically registered if using CDN.
export default {
components: {
Media
}
}
</script>
The value of query
can also be a media query string like (max-width: 500px)
, for more info please see json2mq doc.
The media
component will only return the first element or component passed to it. Example:
<template>
<media :query="{maxWidth: 600}">
<h2>hello world</h2>
<my-other-component></my-other-component> <!-- this will not be used! -->
</media>
</template>
Events
Use the media-enter
and media-leave
events.
<template>
<div>
<media
:query="{maxWidth: 600}"
@media-enter="mediaEnter"
@media-leave="mediaLeave"
>
<h2>Hello world</h2>
</media>
<h2 v-if="greaterThan600">I'm now wider than 600!</h2>
</div>
</template>
<script>
import Media from 'vue-media'
export default {
components: {
Media
},
data() {
return {
greaterThan600: window.innerWidth > 600
}
},
methods: {
mediaEnter(mediaQueryString) {
this.greaterThan600 = false
},
mediaLeave(mediaQueryString) {
this.greaterThan600 = true
}
}
}
</script>
The first argument of the listener is a mediaQueryString like (min-width: 400px)
.
Props
Prop | Type | Default | Description |
---|---|---|---|
visibleByDefault | boolean |
false |
Whether to show the element by default. |
Browser support
If you want to support legacy browsers (ie <= 10), please include a window.matchMedia
polyfill.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
vue-media © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
egoistian.com · GitHub @egoist · Twitter @_egoistlily
Empty Slots Error
When slots are empty (i.e. async content), we see a Vue error during render:
Bump elliptic from 6.4.0 to 6.5.3
Bumps elliptic from 6.4.0 to 6.5.3.
Commits
8647803
6.5.3856fe4d
signature: prevent malleability and overflows6048941
6.5.29984964
package: bump dependenciesec735ed
utils: leak less information ingetNAF()
71e4e8e
6.5.17ec66ff
short: add infinity check before multiplyingee7970b
travis: really move on637d021
travis: move on5ed0bab
package: update depsDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump lodash from 4.17.4 to 4.17.19
Bumps lodash from 4.17.4 to 4.17.19.
Release notes
Sourced from lodash's releases.
Commits
d7fbc52
Bump to v4.17.192e1c0f2
Add npm-package1b6c282
Bump to v4.17.18a370ac8
Bump to v4.17.171144918
Rebuild lodash and docs3a3b0fd
Bump to v4.17.16c84fe82
fix(zipObjectDeep): prototype pollution (#4759)e7b28ea
Sanitize sourceURL so it cannot affect evaled code (#4518)0cec225
Fix lodash.isEqual for circular references (#4320) (#4515)94c3a81
Document matches* shorthands for over* methods (#4510) (#4514)Maintainer changes
This version was pushed to npm by mathias, a new releaser for lodash since your current version.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
docs: typos in readme
Hey, I saw some typos and improvements in the readme. I think the prop description could be clearer, as it's not clear what element it is referring to. eg: What happens during SSR?
Added mediaEnter and mediaLeave events
Added some events for when the query matches (enters) or doesn't match (leaves).
So if you need to interact with the rest of your Vue app on media breaks you can use v-on:mediaEnter or v-on:mediaLeave
Bump express from 4.15.3 to 4.18.2
Bumps express from 4.15.3 to 4.18.2.
Release notes
Sourced from express's releases.
... (truncated)
Changelog
Sourced from express's changelog.
... (truncated)
Commits
8368dc1
4.18.261f4049
docs: replace Freenode with Libera Chatbb7907b
build: [email protected]f56ce73
build: [email protected]24b3dc5
deps: [email protected]689d175
deps: [email protected]340be0f
build: [email protected]33e8dc3
docs: use Node.js name style644f646
build: [email protected]ecd7572
build: [email protected]Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump css-what from 2.1.0 to 2.1.3
Bumps css-what from 2.1.0 to 2.1.3.
Commits
2db00ca
2.1.3dc51092
fix(css-selectors): extend regex to include superscript in range, fix #27 (#28)a5f1991
Test on node LTSb2a2117
2.1.2e9ef3f1
Run prettier070b2f8
Add remaining parsed outputs (#25)af801e4
update license references to match license file (#23)2d495d0
Update to node 10 in .travis.yml (#22)c636f0d
Allow escaped parentheses in pseudo selectors (#20)4e255c9
Update .travis.ymlDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Configure Renovate
Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.
🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.
Detected Package Files
package.json
(npm)Configuration Summary
Based on the default config's presets, Renovate will:
fix
for dependencies andchore
for all othersnode_modules
,bower_components
,vendor
and various test/tests directories🔡 Would you like to change the way Renovate is upgrading your dependencies? Simply edit the
renovate.json
in this branch with your custom config and the list of Pull Requests in the "What to Expect" section below will be updated the next time Renovate runs.What to Expect
With your current configuration, Renovate will create 10 Pull Requests:
chore(deps): pin dependencies
renovate/pin-dependencies
master
3.0.4
3.1.0
1.0.0
9.0.2
0.18.2
chore(deps): update dependency bili to v3.4.2
renovate/bili-3.x
master
3.4.2
chore(deps): update dependency eslint-config-rem to v3.2.2
renovate/eslint-config-rem-3.x
master
3.2.2
chore(deps): update dependency gh-pages to v1.2.0
renovate/gh-pages-1.x
master
1.2.0
chore(deps): update dependency poi to v9.6.13
renovate/poi-9.x
master
9.6.13
chore(deps): update dependency xo to v0.50.0
renovate/xo-0.x
master
0.50.0
chore(deps): update dependency bili to v5
renovate/bili-5.x
master
5.0.5
chore(deps): update dependency eslint-config-rem to v4
renovate/eslint-config-rem-4.x
master
4.0.0
chore(deps): update dependency gh-pages to v4
renovate/gh-pages-4.x
master
4.0.0
chore(deps): update dependency poi to v12
renovate/poi-12.x
master
12.10.3
🚸 Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for
prhourlylimit
for details.❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.
This PR has been generated by Mend Renovate. View repository job log here.
Bump path-parse from 1.0.5 to 1.0.7
Bumps path-parse from 1.0.5 to 1.0.7.
Commits
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump tar from 2.2.1 to 2.2.2
Bumps tar from 2.2.1 to 2.2.2.
Commits
523c5c7
2.2.27ecef07
Bump fstream to fix hardlink overwriting vulnerability9fc84b9
Use {} for hardlink tracking instead of []15e59f1
Only track previously seen hardlinks4f85851
Ignore potentially unsafe filesDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump hosted-git-info from 2.2.0 to 2.8.9
Bumps hosted-git-info from 2.2.0 to 2.8.9.
Changelog
Sourced from hosted-git-info's changelog.
... (truncated)
Commits
8d4b369
chore(release): 2.8.929adfe5
fix: backport regex fix from #76afeaefd
chore(release): 2.8.85038b18
fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...7440afa
chore(release): 2.8.72d0bb66
fix: Do not attempt to use url.URL when unavailablef2cdfcf
fix: Do not pass scp-style URLs to the WhatWG url.URLe1b83df
chore(release): 2.8.6ff259a6
Ensure passwords in hosted Git URLs are correctly escaped624fd6f
chore(release): 2.8.5Maintainer changes
This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.