Responsive design is a cornerstone of modern web development, ensuring that your application adapts gracefully to various screen sizes. In this comprehensive guide, we’ll explore how to achieve easy and reactive access to the width and height of your screen using Vue.js. Leveraging Vue.js reactivity, we’ll create a simple yet powerful solution that allows your application to seamlessly respond to changes in screen dimensions.
Introduction to Vue.js and Screen Dimensions
Vue.js is a JavaScript framework renowned for its simplicity and reactivity. By integrating Vue.js into your project, you gain the ability to create dynamic and responsive user interfaces. In this guide, we’ll focus on utilizing Vue.js to obtain real-time access to the width and height of the screen, enabling you to tailor your application’s layout accordingly.
Setting Up the Vue.js Project
Begin by setting up a new Vue.js project using the Vue CLI:
vue create vue-screen-dimensions
Navigate to the project directory:
cd vue-screen-dimensions
Creating the ScreenDimensions Component
Create a modular Vue component, named ScreenDimensions.vue
, to encapsulate the functionality of accessing screen dimensions:
<!-- ScreenDimensions.vue -->
<template>
<div class="screen-dimensions">
<p>Screen Width: {{ screenWidth }}px</p>
<p>Screen Height: {{ screenHeight }}px</p>
</div>
</template>
<script>
export default {
data() {
return {
screenWidth: window.innerWidth,
screenHeight: window.innerHeight,
};
},
mounted() {
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.screenWidth = window.innerWidth;
this.screenHeight = window.innerHeight;
},
},
};
</script>
<style scoped>
/* Component-specific styles here */
.screen-dimensions {
text-align: center;
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f8f8f8;
}
</style>
This component displays the current screen width and height, and it dynamically updates these values when the screen is resized.
Incorporating the ScreenDimensions Component
Integrate the ScreenDimensions
component into your main application file (e.g., App.vue
):
<!-- App.vue -->
<template>
<div id="app">
<ScreenDimensions />
</div>
</template>
<script>
import ScreenDimensions from './components/ScreenDimensions.vue';
export default {
components: {
ScreenDimensions,
},
};
</script>
<style>
/* Global styles here */
body {
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
#app {
text-align: center;
padding: 20px;
}
</style>
There are following steps through that we can Get easy and reactive access to the width and height of your screen
About Vue.js library
Sometimes when building an app you need to have access to the screen’s dimensions. Usually that’s going to be done in the css using @media – but sometimes you need to access that info right in your JavaScript
The issue with this is you have to worry about adding event listeners and then removing them later. We wanted to just be able to import something quickly and then be able to forget about it later. So this mixin does just that – just use Vue.use() or mixins: [], and you’re off.
There is something to consider – where and how you include this library. There are two ways, make sure to be aware of the differences:
Install
# npm npm i vue-screen-size # yarn yarn add vue-screen-size
Or you can include it through the browser at the bottom of your page:
<script src="https://unpkg.com/vue-screen-size/dist/vue-screen-size.min.js"></script>
Usage Example 1 – Whole app has access (Not Recommended)
In this usage – your whole app – and every child component – has access to the $vssWidth, $vssHeight, and $vssEvent variables. This is sorta pollutive though, as multiple instances of the mixin are initialized and it’s kinda wasteful. The is due to the way Vue mixins are passed down to child components. You can read more about this here. The second example is recommended
import VueScreenSize from 'vue-screen-size' Vue.use(VueScreenSize)
// Access `this.$vssWidth`, `this.$vssHeight`, and `this.$vssEvent` anywhere in your app
Usage Example 2 – Just the component you install it on has access – (Recommended)
import VueScreenSize from 'vue-screen-size' export default { ... mixins: [VueScreenSize.VueScreenSizeMixin], ... } // Access `this.$vssWidth`, `this.$vssHeight`, and `this.$vssEvent` in your component.
Variables
name | type | description |
---|---|---|
$vssWidth | Number | The width of your screen |
$vssHeight | Number | The height of your screen |
$vssEvent | Object | The event object data from the resizing event. |
Methods
method | parameters | description |
---|---|---|
$vssDestroyListener | none | Force the removal of the attached event listener |
Development
# install dependencies npm install # serve with hot reload npm run watch # run the tests npm run test # build demo page npm run build:example # build npm run build # publish to npm npm publish