A simple Vue.js component for fullscreen

vue-fullscreen

You can use a simple Vue.js component to toggle fullscreen mode on any of your desired content.

You can see it live here.

Example

To start working with vue-fullscreen use the following command to install it.

$ yarn add vue-fullscreen

Import in your project

import fullscreen from 'vue-fullscreen'

Vue.use(fullscreen)

Component Usage:

<fullscreen :fullscreen.sync="fullscreen" background="#fac78f">
Your Content to display in fullscreen
...

...
</fullscreen>

The background style of the wrapper can be changed as the example, only available when fullscreen mode is on and wrap is true. It can be also used as a component and as a plugin. All the available methods and events are on the plugin's page.

export default {
methods: {
    toggle () {
            this.fullscreen = !this.fullscreen
    }
},
data() {
    return {
            fullscreen: false
    }
}
}

Caution: Because of the browser security function, you can only call these methods by a user gesture. (e.g. a click callback). To make sure it is supported by browsers visit the Full-Screen API.

If you would like to explore more about vue-fullscreen, head to the project's repository on GitHub, where you will also find the source code.