{"id":24779101,"url":"https://github.com/victor141516/float-my-vue","last_synced_at":"2026-04-30T18:31:47.804Z","repository":{"id":161815794,"uuid":"636449341","full_name":"victor141516/float-my-vue","owner":"victor141516","description":"Float My Vue is a lightweight and versatile Vue.js library that simplifies the positioning and handling of floating elements such as tooltips, popovers and more.","archived":false,"fork":false,"pushed_at":"2023-05-05T00:41:01.000Z","size":157,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-16T22:27:17.741Z","etag":null,"topics":["absolute","float","floating","floating-ui","tooltip","vue","vue3"],"latest_commit_sha":null,"homepage":"https://github.com/victor141516/float-my-vue","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/victor141516.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-05-04T21:53:29.000Z","updated_at":"2023-05-04T22:31:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"12d1f2d5-04d4-405e-8a0e-1acdcf3053a6","html_url":"https://github.com/victor141516/float-my-vue","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/victor141516/float-my-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victor141516%2Ffloat-my-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victor141516%2Ffloat-my-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victor141516%2Ffloat-my-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victor141516%2Ffloat-my-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/victor141516","download_url":"https://codeload.github.com/victor141516/float-my-vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victor141516%2Ffloat-my-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32473804,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["absolute","float","floating","floating-ui","tooltip","vue","vue3"],"created_at":"2025-01-29T09:35:30.713Z","updated_at":"2026-04-30T18:31:47.788Z","avatar_url":"https://github.com/victor141516.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"300\" alt=\"image\" align=\"left\" src=\"https://user-images.githubusercontent.com/5548950/236342921-71cc0711-fad6-48a1-ab87-f24c79fe24f8.png\"\u003e\n\n# Float My Vue\n\nFloat My Vue is a lightweight and versatile Vue.js library that simplifies the positioning and handling of floating elements such as tooltips, popovers and more.\n\n## [Demo here](https://stackblitz.com/edit/vue-jipvav?file=src/App.vue)\n\n\u003cdetails\u003e\n  \u003csummary\u003eVideo example\u003c/summary\u003e\n  \u003cvideo loop autoplay width=\"100\" src=\"https://user-images.githubusercontent.com/5548950/236342380-a775553a-e717-4748-aa85-3528b5e185a2.mov\" /\u003e\n\u003c/details\u003e\n\n## Features\n\n- Automatic positioning and repositioning of floating elements\n- Fully customizable\n- Easy integration with existing Vue projects\n- Built-in accessibility features\n- Slot support for custom content\n- Responsive design\n\n## Installation\n\nInstall the package using npm:\n\n```bash\nnpm install float-my-vue\n```\n\n## Setup\n\nImport `FloatMyVue` in the components where you would like to use it:\n\n```js\nimport { FloatMyVue } from 'float-my-vue';\n```\n\nAnd import the styles in the main file of your project (or wherever you prefer while making sure that the styles are loaded before the component is used):\n\n```js\nimport 'float-my-vue/style.css';\n```\n\n## Usage\n\n### Basic Usage\n\nBy default you can use the component with some styled content:\n\n```html\n\u003cFloatMyVue side=\"right\"\u003e\n    \u003ctemplate #reference\u003eOpen!\u003c/template\u003e\n    \u003ctemplate #content\u003eContent\u003c/template\u003e\n\u003c/FloatMyVue\u003e\n```\n\nAlso you can use a light theme:\n\n```html\n\u003cFloatMyVue side=\"right\" color=\"light\"\u003e\n    \u003ctemplate #reference\u003eOpen!\u003c/template\u003e\n    \u003ctemplate #content\u003eContent\u003c/template\u003e\n\u003c/FloatMyVue\u003e\n```\n\n### Customization\n\nYou can change the position of the floating element:\n\n```html\n\u003cFloatMyVue side=\"right\" side=\"right\"\u003e \u003c!-- left, top, bottom --\u003e\n    \u003ctemplate #reference\u003eOpen!\u003c/template\u003e\n    \u003ctemplate #content\u003eContent\u003c/template\u003e\n\u003c/FloatMyVue\u003e\n```\n\nYou can change the size of the arrow:\n\n```html\n\u003cFloatMyVue side=\"right\" :arrow-size=\"50\"\u003e\n    \u003ctemplate #reference\u003eOpen!\u003c/template\u003e\n    \u003ctemplate #content\u003eContent\u003c/template\u003e\n\u003c/FloatMyVue\u003e\n```\n\nYou can adjust the position of the floating element:\n\n```html\n\u003cFloatMyVue side=\"right\" :offset=\"{ x: 123, y: 321 }\"\u003e\n    \u003ctemplate #reference\u003eOpen!\u003c/template\u003e\n    \u003ctemplate #content\u003eContent\u003c/template\u003e\n\u003c/FloatMyVue\u003e\n```\n\nYou can control the open/close state externally:\n\n```html\n\u003cFloatMyVue side=\"right\" :open=\"true\"\u003e\n    \u003ctemplate #reference\u003eOpen!\u003c/template\u003e\n    \u003ctemplate #content\u003eContent\u003c/template\u003e\n\u003c/FloatMyVue\u003e\n```\n\n### Slots\n\nThere are slots that allow you to customize the content:\n\n```html\n\u003cFloatMyVue side=\"right\" color=\"light\"\u003e\n    \u003ctemplate #reference\u003eOpen!\u003c/template\u003e\n    \u003ctemplate #arrow\u003e⬇️\u003c/template\u003e\n    \u003ctemplate #float\u003eThis doesn't look good\u003c/template\u003e\n\u003c/FloatMyVue\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictor141516%2Ffloat-my-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvictor141516%2Ffloat-my-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictor141516%2Ffloat-my-vue/lists"}