{"id":13824402,"url":"https://github.com/mirari/vue3-fullscreen","last_synced_at":"2025-03-06T06:16:38.522Z","repository":{"id":108504275,"uuid":"372233485","full_name":"mirari/vue3-fullscreen","owner":"mirari","description":"A simple Vue 3.x component for fullscreen, based on screenfull.","archived":false,"fork":false,"pushed_at":"2024-09-26T09:31:09.000Z","size":489,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-16T17:28:01.377Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mirari.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-30T14:18:26.000Z","updated_at":"2024-09-26T09:31:13.000Z","dependencies_parsed_at":"2024-01-15T17:39:21.887Z","dependency_job_id":"65fc72a3-6c09-4b5d-a301-9cf9079d6074","html_url":"https://github.com/mirari/vue3-fullscreen","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirari%2Fvue3-fullscreen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirari%2Fvue3-fullscreen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirari%2Fvue3-fullscreen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirari%2Fvue3-fullscreen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mirari","download_url":"https://codeload.github.com/mirari/vue3-fullscreen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242157272,"owners_count":20081041,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T09:01:02.098Z","updated_at":"2025-03-06T06:16:38.496Z","avatar_url":"https://github.com/mirari.png","language":"Vue","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# vue-fullscreen\n\nA simple Vue.js component for fullscreen, based on [screenfull.js](https://github.com/sindresorhus/screenfull.js)\n\n[![npm version](https://img.shields.io/npm/v/vue-fullscreen.svg)](https://www.npmjs.com/package/vue-fullscreen)\n[![language](https://img.shields.io/badge/language-Vue2-brightgreen.svg)](https://www.npmjs.com/package/vue-fullscreen)\n\n[![npm version](https://img.shields.io/npm/v/vue-fullscreen/next.svg)](https://www.npmjs.com/package/vue-fullscreen)\n[![language](https://img.shields.io/badge/language-Vue3-brightgreen.svg)](https://www.npmjs.com/package/vue-fullscreen)\n\n[![npm download](https://img.shields.io/npm/dw/vue-fullscreen.svg)](https://www.npmjs.com/package/vue-fullscreen)\n[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/)\n\n## [vue-fullscreen for vue2](https://github.com/mirari/vue-fullscreen)\n\n## [Live demo](http://mirari.github.io/vue3-fullscreen/)\n\n## Quick Example\n\n- [Component](https://codepen.io/mirari/pen/LYWeNZM)\n- [Api](https://codepen.io/mirari/pen/abJENpa)\n- [Directive](https://codepen.io/mirari/pen/yLoQZLp)\n- [Compatible handling in iPhone \u0026 Popups in fullscreen](https://codepen.io/mirari/pen/abJEVNe)\n- [Navigate to a new page without exiting fullscreen](https://codepen.io/mirari/pen/oNZEOEw)\n\n## [中文文档](https://mirari.cc/posts/vue3-fullscreen)\n\n## Support\n\n[Supported browsers](http://caniuse.com/fullscreen)\n\n**Note**: In order to use this package in Internet Explorer, you need a Promise polyfill.\n\n**Note**: Safari is supported on desktop and iPad, but not on iPhone. \n\n**Note:** Navigating to another page, changing tabs, or switching to another application using any application switcher (or Alt-Tab) will likewise exit full-screen mode.\n\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)\n\n## Installation\n\nInstall from NPM\n\n```bash\nnpm install vue-fullscreen@next\n```\n\n## Usage\n\nTo use `vue-fullscreen`, simply import it, and call `app.use()` to install.\n\nThe component, directive and api will be installed together in the global.\n\n```ts\nimport { createApp } from 'vue'\nimport VueFullscreen from 'vue-fullscreen'\nimport App from './App.vue'\n\nexport const app = createApp(App)\napp.use(VueFullscreen)\napp.mount('#app')\n\n```\n\n```vue\n\u003ctemplate\u003e\n\u003cdiv ref=\"root\"\u003e\n  \u003c!-- Component  --\u003e\n  \u003cfullscreen v-model=\"fullscreen\"\u003e\n    content\n  \u003c/fullscreen\u003e\n  \u003c!-- Api  --\u003e\n  \u003cbutton type=\"button\" @click=\"toggleApi\" \u003eFullscreenApi\u003c/button\u003e\n  \u003c!-- Directive  --\u003e\n  \u003cbutton type=\"button\" v-fullscreen \u003eFullscreenDirective\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript lang=\"ts\"\u003e\n  import {\n    ref,\n    defineComponent,\n    toRefs,\n    reactive\n  } from 'vue'\n  export default defineComponent({\n    methods: {\n      toggleApi () {\n        this.$fullscreen.toggle()\n      }\n    },\n    setup () {\n      const root = ref()\n      const state = reactive({\n        fullscreen: false,\n      })\n      function toggle () {\n        state.fullscreen = !state.fullscreen\n      }\n      return {\n        root,\n        ...toRefs(state),\n        toggle\n      }\n    }\n  })\n\u003c/script\u003e\n```\n\n**Caution:** Because of the browser security function, you can only call these methods by a user gesture(`click` or `keypress`).\n\n\n\n### Usage of api\n\nIn your vue component, You can use `this.$fullscreen` to get the instance.\n\n```javascript\nthis.$fullscreen.toggle()\n```\n\nOr you can just import the api method and call it.\n\n```vue\n\u003ctemplate\u003e\n\u003cdiv ref=\"root\"\u003e\n  \u003cdiv class=\"fullscreen-wrapper\"\u003e\n    Content\n  \u003c/div\u003e\n  \u003cbutton type=\"button\" @click=\"toggle\" \u003eFullscreen\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript lang=\"ts\"\u003e\n  import {\n    ref,\n    defineComponent,\n    toRefs,\n    reactive,\n  } from 'vue'\n  import { api as fullscreen } from 'vue-fullscreen'\n  export default defineComponent({\n    setup() {\n      const root = ref()\n      const state = reactive({\n        fullscreen: false,\n        teleport: true,\n      })\n\n      async function toggle () {\n        await fullscreen.toggle(root.value.querySelector('.fullscreen-wrapper'), {\n          teleport: state.teleport,\n          callback: (isFullscreen) =\u003e {\n            // state.fullscreen = isFullscreen\n          },\n        })\n        state.fullscreen = fullscreen.isFullscreen\n      }\n\n      return {\n        root,\n        ...toRefs(state),\n        toggle,\n      }\n    },\n  })\n\u003c/script\u003e\n```\n\n### Methods \u0026 Attributes\n\n#### toggle([target, options, force])\n\nToggle the fullscreen mode.\n\n- **target**:\n  - Type: `Element`\n  - Default: `document.body`\n  - The element target for fullscreen.\n- **options** (optional):\n  - Type: `Object`\n  - The fullscreen options.\n- **force** (optional):\n  - Type: `Boolean`\n  - Default: `undefined`\n  - pass `true` to  force enter , `false` to exit fullscreen mode.\n\n#### request([target, options])\n\nenter the fullscreen mode.\n\n- **target**:\n  - Type: `Element`\n  - Default: `document.body`\n  - The element target for fullscreen.\n- **options** (optional):\n  - Type: `Object`\n  - The fullscreen options.\n\n#### exit()\n\nexit the fullscreen mode.\n\n**Note:** Each of these methods returns a promise object, and you can get the state after the promise has been resolved, or you can pass a callback function in options to get.\n\n```javascript\nasync toggle () {\n  await this.$fullscreen.toggle()\n  this.fullscreen = this.$fullscreen.isFullscreen\n}\n```\n\n#### isFullscreen\n\nget the fullscreen state.\n\n- Type: `Boolean`\n\n**Caution:** The action is asynchronous, you can not get the expected state immediately following the calling method.\n\n#### isEnabled\n\ncheck browser support for the fullscreen API.\n\n- Type: `Boolean`\n\n#### element\n\nget the fullscreen element.\n\n- Type: `Element | null`\n\n\n### Options\n\n### callback\n\n- Type: `Function`\n- Default: `null`\n\nIt will be called when the fullscreen mode changed.\n\n### fullscreenClass\n\n- Type: `String`\n- Default: `fullscreen`\n\nThe class will be added to target element when fullscreen mode is on.\n\n#### pageOnly\n\n- Type: `Boolean`\n- Default: `false`\n\nIf `true`, only fill the page with current element.\n\n**Note:** If the browser does not support full-screen Api, this option will be automatically enabled.\n\n#### teleport\n\n- Type: `Boolean`\n- Default: `true`\n\nIf `true`, the target element will be appended to `document.body` when it is fullscreen.\n\nThis can avoid some pop-ups not being displayed.\n\n\n\n\n## Use as directive\n\nYou can use `v-fullscreen` to make any element have the effect of switching to full screen with a click.\n\n```html\n\u003cbutton v-fullscreen\u003eFullScreen\u003c/button\u003e\n```\nOr you can just import the directive and install it.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"fullscreen-wrapper\"\u003e\n      Content\n    \u003c/div\u003e\n    \u003cbutton type=\"button\" v-fullscreen.teleport=\"options\" \u003eFullscreen\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript lang=\"ts\"\u003e\n  import {\n    ref,\n    defineComponent,\n    toRefs,\n    reactive\n  } from 'vue'\n  import { directive as fullscreen } from 'vue-fullscreen'\n  export default defineComponent({\n    directives: {\n      fullscreen\n    },\n    setup () {\n      const root = ref()\n      const state = reactive({\n        options: {\n          target: \".fullscreen-wrapper\",\n          callback (isFullscreen) {\n            console.log(isFullscreen)\n          },\n        },\n      })\n      return {\n        root,\n        ...toRefs(state),\n        toggle\n      }\n    }\n  })\n\u003c/script\u003e\n```\n\n### Modifiers\n\n#### pageOnly\n\nonly fill the page with current element.\n\n#### teleport\n\nthe component will be appended to `document.body` when it is fullscreen.\n\nThis can avoid some pop-ups not being displayed.\n\n### Options\n\n#### target\n\n- Type: `String | Element`\n- Default: `document.body`\n\nThe element can be specified using a style selector string, equivalent to `document.querySelector(target)`. Note that when passing an element object directly, you need to make sure that the element already exists. The internal elements of the current component may not be initialized when the directive is initialized.\n\n#### callback\n\n- Type: `Function`\n- Default: `null`\n\nIt will be called when the fullscreen mode changed.\n\n#### fullscreenClass\n\n- Type: `String`\n- Default: `fullscreen`\n\nThe class will be added to target element when fullscreen mode is on.\n\n\n\n## Usage of component\n\nYou can simply import the component and register it locally too.\n\n```vue\n\u003ctemplate\u003e\n\u003cdiv\u003e\n  \u003cfullscreen v-model=\"fullscreen\" :teleport=\"teleport\" :page-only=\"pageOnly\" \u003e\n    Content\n  \u003c/fullscreen\u003e\n  \u003cbutton type=\"button\" @click=\"toggle\" \u003eFullscreen\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n  import {\n    defineComponent,\n    toRefs,\n    reactive,\n  } from 'vue'\n  import { component } from 'vue-fullscreen'\n\n  export default defineComponent({\n    name: 'ComponentExample',\n    components: {\n      fullscreen: component,\n    },\n    setup() {\n      const state = reactive({\n        fullscreen: false,\n        teleport: true,\n        pageOnly: false,\n      })\n      function toggle() {\n        state.fullscreen = !state.fullscreen\n      }\n\n      return {\n        ...toRefs(state),\n        toggle,\n      }\n    },\n  })\n\u003c/script\u003e\n```\n\n### Props\n\n#### fullscreen-class\n\n- Type: `String`\n- Default: `fullscreen`\n\nThe class will be added to the component when fullscreen mode is on.\n\n#### exit-on-click-wrapper\n\n- Type: `Boolean`\n- Default: `true`\n\nIf `true`, clicking wrapper will exit fullscreen.\n\n#### page-only\n\n- Type: `Boolean`\n- Default: `false`\n\nIf `true`, only fill the page with current element.\n\n**Note:** If the browser does not support full-screen Api, this option will be automatically enabled.\n\n#### teleport\n\n- Type: `Boolean`\n- Default: `true`\n\nIf `true`, the component will be appended to `document.body` when it is fullscreen.\n\nThis can avoid some pop-ups not being displayed.\n\n### Events\n\n#### change\n\n- **isFullscreen**:  The current fullscreen state.\n\nThis event fires when the fullscreen mode changed.\n\n\n\n\n## Plugin options\n\n### name\n\n- Type: `String`\n- Default: `fullscreen`\n\nIf you need to avoid name conflict, you can import it like this:\n\n```ts\nimport { createApp } from 'vue'\nimport VueFullscreen from 'vue-fullscreen'\nimport App from './App.vue'\n\nexport const app = createApp(App)\napp.use(VueFullscreen, {\n  name: 'fs',\n})\napp.mount('#app')\n\n```\n\n```vue\n\u003ctemplate\u003e\n\u003cdiv ref=\"root\"\u003e\n  \u003c!-- Component  --\u003e\n  \u003cfs v-model=\"fullscreen\"\u003e\n    content\n  \u003c/fs\u003e\n  \u003c!-- Api  --\u003e\n  \u003cbutton type=\"button\" @click=\"toggleApi\" \u003eFullscreenApi\u003c/button\u003e\n  \u003c!-- Directive  --\u003e\n  \u003cbutton type=\"button\" v-fs \u003eFullscreenDirective\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript lang=\"ts\"\u003e\n  import {\n    ref,\n    defineComponent,\n    toRefs,\n    reactive\n  } from 'vue'\n  export default defineComponent({\n    methods: {\n      toggleApi () {\n        this.$fs.toggle()\n      }\n    },\n    setup () {\n      const root = ref()\n      const state = reactive({\n        fullscreen: false,\n      })\n      function toggle () {\n        state.fullscreen = !state.fullscreen\n      }\n      return {\n        root,\n        ...toRefs(state),\n        toggle\n      }\n    }\n  })\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirari%2Fvue3-fullscreen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmirari%2Fvue3-fullscreen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirari%2Fvue3-fullscreen/lists"}