A simple Vue.js component for 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.


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'


Component Usage:

<fullscreen :fullscreen.sync="fullscreen" background="#fac78f">
Your Content to display in 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.