imps-element-fullscreen v1.0.3

Imps Element Fullscreen

A vue js method that can easily move to element fullscreen view. Available for vue2 and vue3 both

Documentation

see documentation here

installation

Vue2

npm i imps-element-fullscreen --tag=v2

Vue3

npm i imps-element-fullscreen --tag=v3

Usage

#Vue 2 
// 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 id="app">
    <div style="padding: 50px; border: 1px solid red; background-color: yellow;">
      <button type="button" @click="fullscreen">{{ isFullscreen ? 'Windowed' : 'Fullscreen'}}</button>
    </div>
  </div>
</template>

<script>

export default {
  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>

#Vue 3 
// 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 (composition api)

<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>

<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>

License

MIT