You can easily detect a device by using this plugin. This plugin is really lightweight and easy to use (available for vue2 and vue3).
Vue2
npm i imps-platform-detect --tag=v2
// import and use in your main.js file
import Vue from 'vue'
import App from './App.vue'
import ImpsPlatform from 'imps-platform-detect';
Vue.use(ImpsPlatform);
new Vue({
render: h => h(App),
}).$mount('#app')
// use on vue components
<template>
<div v-if="$platform.isMobile">Platform is Mobile</div>
<div v-if="$platform.isWeb">Platform is Web</div>
<div v-if="$platform.isTablet">Platform is Tablet</div>
</template>
// use on vue script
<script>
export default {
mounted(){
console.log(`Platform is ${this.$platform.isMobile}`);
console.log(`Platform is ${this.$platform.isWeb}`);
console.log(`Platform is ${this.$platform.isTablet}`);
}
}
</script>
Vue3
npm i imps-platform-detect --tag=v3
// import and use in your main.js file
import { createApp } from 'vue';
import App from './App.vue';
import ImpsPlatform from 'imps-platform-detect';
const app = createApp(App);
// Install the plugin globally
app.use(ImpsPlatform);
app.mount('#app');
// use on vue components
<template>
<div v-if="$platform.isMobile">Platform is Mobile</div>
<div v-if="$platform.isWeb">Platform is Web</div>
<div v-if="$platform.isTablet">Platform is Tablet</div>
</template>
Skeleton loader vue component. Working on vue2 and vue3 both.
Vue2
npm i imps-skeleton-loader --tag=v2
// import and use in your main.js file
import Vue from 'vue'
import App from './App.vue'
import ImpsSkeletonLoader from 'imps-skeleton-loader';
Vue.use(ImpsSkeletonLoader);
new Vue({
render: h => h(App),
}).$mount('#app')
// use on vue components
<template>
<imps-skeleton-loader width="200px" height="10px" round="10px" />
</template>
Vue3
npm i imps-skeleton-loader --tag=v3
// import and use in your main.js file
import { createApp } from 'vue';
import App from './App.vue';
import ImpsSkeletonLoader from 'imps-skeleton-loader';
const app = createApp(App);
// Install the plugin globally
app.use(ImpsSkeletonLoader);
app.mount('#app');
// use on vue components
<template>
<imps-skeleton-loader width="200px" height="10px" round="10px" />
</template>
A vue js method that can easily move to element fullscreen view. Available for vue2 and vue3 both.
Vue2
npm i imps-element-fullscreen --tag=v2
// import and use in your main.js file
import Vue from 'vue'
import App from './App.vue'
import ImpsElementFullscreen from 'imps-element-fullscreen'
Vue.use(ImpsElementFullscreen);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
// use on vue components
<template>
<div>
<div style="padding: 50px; border: 1px solid red; background-color: yellow;">
<button type="button" @click="fullscreen">{{ isFullscreen ? 'Windowed' : 'Fullscreen'}};</button>
</div>
</div>
</template>
// use on vue script
<script>
name: 'App',
data(){
return{
isFullscreen: false
}
},
methods:{
fullscreen(e){
const target = e.target.parentNode
this.$elementFullscreen(target)
.then((response) => {
this.isFullscreen = response;
})
.catch((error) => {
console.error("Fullscreen activation failed:", error);
});
}
}
</script>
Vue3
npm i imps-element-fullscreen --tag=v3
// import and use in your main.js file
import { createApp } from 'vue';
import App from './App.vue';
import ImpsElementFullscreen from 'imps-element-fullscreen';
const app = createApp(App);
// Install the plugin globally
app.use(ImpsElementFullscreen);
app.mount('#app');
// use on vue components
<template>
<div>
<div style="padding: 50px; border: 1px solid red; background-color: yellow;">
<button type="button" @click="fullscreen">{{ isFullscreen ? 'Windowed' : 'Fullscreen'}};</button>
</div>
</div>
</template>
// use on vue script (composition api)
<script>
import { ref, getCurrentInstance } from 'vue'
export default {
setup() {
const app = getCurrentInstance();
const elementFullscreen = app.appContext.config.globalProperties.$elementFullscreen;
const isFullscreen = ref(false);
const fullscreen = (e) => {
const target = e.target.parentNode
elementFullscreen(target)
.then((response) => {
isFullscreen.value = response;
})
.catch((error) => {
console.error("Fullscreen activation failed:", error);
});
};
return {
isFullscreen,
fullscreen
};
},
};
</script>