vuex-viewport
Version:
Vuex extension that allows making window size as computed property.
56 lines (55 loc) • 1.59 kB
HTML
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Example with script tag</title>
<script src="https://unpkg.com/es6-promise@4.2.5/dist/es6-promise.auto.js"></script>
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@2.3.0/dist/vuex.js"></script>
<script src="https://unpkg.com/vuex-viewport@latest/dist/vuex-viewport.js"></script>
</head>
<body>
<div id="app">
<p>Layout type: {{ layoutType }}</p>
<p>Window size: {{ windowWidth }} x {{ windowHeight }}</p>
</div>
<script>
window.addEventListener('load', function () {
var pluginOptions = {
delay: 200,
maxDelay: 1000,
breakpoints: {
tablet: 768,
desktop: 992,
largeDesktop: 1200
}
};
var store = new Vuex.Store({
modules: {
viewport: vuexViewport.storeModule
},
plugins: [
vuexViewport.createPlugin(pluginOptions)
]
});
new Vue({
el: '#app',
store: store,
computed: {
windowWidth: function () {
return this.$store.state.viewport.width;
},
windowHeight: function () {
return this.$store.state.viewport.height;
},
layoutType: function () {
return this.$store.getters['viewport/mediaName'];
}
}
});
});
</script>
</body>
</html>