{"id":21890129,"url":"https://github.com/ejfox/nuxt-force-layout","last_synced_at":"2026-04-11T14:04:14.226Z","repository":{"id":232585479,"uuid":"713496618","full_name":"ejfox/nuxt-force-layout","owner":"ejfox","description":"Easy D3-powered force layouts with all the trimmings","archived":false,"fork":false,"pushed_at":"2023-11-02T16:29:42.000Z","size":150,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-19T20:05:33.775Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/ejfox.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-11-02T16:29:41.000Z","updated_at":"2023-11-02T16:37:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"a87ab24d-d319-44ec-81fb-a8b525465649","html_url":"https://github.com/ejfox/nuxt-force-layout","commit_stats":null,"previous_names":["ejfox/nuxt-force-layout"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fnuxt-force-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fnuxt-force-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fnuxt-force-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fnuxt-force-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ejfox","download_url":"https://codeload.github.com/ejfox/nuxt-force-layout/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244898409,"owners_count":20528335,"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-11-28T11:28:57.214Z","updated_at":"2025-12-30T21:48:13.182Z","avatar_url":"https://github.com/ejfox.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌠 ForceLayout: D3 Force Layouts Made Easy in Nuxt 🌌\n\n**ForceLayout** simplifies the process of creating mesmerizing D3 force layouts with nodes and edges. Perfect for visualizing everything from social networks to complex systems, right in your Nuxt app! 🎉\n\n## 🌈 Features\n\n- 📊 Easy-to-use API for D3 force layouts.\n- 🔄 Built-in data importers for Neo4j and Gephi.\n- 🎛️ Real-time manipulation of force properties.\n- 🎨 SVG and Canvas rendering modes.\n- 🔌 Vue-friendly, using a directive-driven approach similar to VUE-USE.\n\n## 📚 Data Importers 🌐\n\nBefore diving into your Nuxt app, you may need to prepare your data into node/edge CSVs with our Node.js-based importers.\n\n### 🌳 Neo4j to ForceLayout 🚀\n\n1. **Install the Neo4j Importer Globally**:\n    ```bash\n    npm install -g @force-layout/neo4j-importer\n    ```\n2. **Run the Script**:\n    ```bash\n    force-layout-neo4j-importer --input neo4j_output.json --nodes nodes.csv --edges edges.csv\n    ```\n3. 🎨 **Import the CSVs**: Your Neo4j data is ready!\n\n### 🌀 Gephi to ForceLayout 🎡\n\n1. **Install the Gephi Importer Globally**:\n    ```bash\n    npm install -g @force-layout/gephi-importer\n    ```\n2. **Run the Script**:\n    ```bash\n    force-layout-gephi-importer --input graph.gexf --nodes nodes.csv --edges edges.csv\n    ```\n3. 🌌 **You're Set!**: Your Gephi data is ready!\n\n## 🛠️ Installation\n\nInstall ForceLayout in your Nuxt project:\n```bash\nnpm install nuxt-force-layout\n```\n\n## 🚀 Usage\n\nAdd the module to your `nuxt.config.js`:\n\n```javascript\nexport default {\n  modules: [\n    'nuxt-force-layout'\n  ]\n}\n```\n\nIn your Vue component, use the `v-force-layout` directive and destructure its properties to customize your force layout:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv ref=\"forceLayoutCanvas\"\u003e\n    \u003c!-- Your force layout will be rendered here --\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  directives: {\n    forceLayout: {\n      bind(el, binding) {\n        const { initForce, updateForce, width, height } = binding.value;\n        // Initialize and manipulate your force layout\n      }\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## 🎛️ Real-Time Manipulation\n\nYou can easily tweak the force layout's properties such as `forceX`, `forceY`, `collision`, etc., in real-time!\n\n```javascript\nupdateForce({ forceX: 0.5, forceY: 0.8 });\n```\n\n## 🎨 Rendering Modes\n\nForceLayout supports two modes:\n\n- **SVG Mode**: For high-quality, scalable graphics.\n- **Canvas Mode**: For performance optimization.\n\nSwitch between them easily:\n\n```javascript\ninitForce({ mode: 'svg' }); // or 'canvas'\n```\n\n## 📚 Starter Scripts for Data Conversion 🔄\n\nIf your data is in JSON, XML, SQL, or other formats, check out our conversion scripts to get you started.\n\n## 🤝 Contributing\n\nWe welcome contributions! Please check out our [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.\n\n\n## Quick Setup\n\n1. Add `nuxt-force-layout` dependency to your project\n\n```bash\n# Using pnpm\npnpm add -D nuxt-force-layout\n\n# Using yarn\nyarn add --dev nuxt-force-layout\n\n# Using npm\nnpm install --save-dev nuxt-force-layout\n```\n\n2. Add `nuxt-force-layout` to the `modules` section of `nuxt.config.ts`\n\n```js\nexport default defineNuxtConfig({\n  modules: [\n    'nuxt-force-layout'\n  ]\n})\n```\n\nThat's it! You can now use My Module in your Nuxt app ✨\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Generate type stubs\nnpm run dev:prepare\n\n# Develop with the playground\nnpm run dev\n\n# Build the playground\nnpm run dev:build\n\n# Run ESLint\nnpm run lint\n\n# Run Vitest\nnpm run test\nnpm run test:watch\n\n# Release new version\nnpm run release\n```\n\n## 🙋‍♀️ Frequently Asked Questions (FAQs) 🤔\n\n### Q: How do I import my custom data formats?\nA: Our built-in Node.js importers currently support Neo4j and Gephi. For other data formats, you can use our starter scripts to help you convert them to the required CSV format.\n\n### Q: Can I use ForceLayout on multiple pages or components?\nA: Absolutely! You can use the `v-force-layout` directive in as many components or pages as you like. Just make sure to initialize it separately for each instance.\n\n### Q: What about touch events for mobile support?\nA: ForceLayout is designed to be responsive and mobile-friendly. It handles touch events just like mouse events out of the box.\n\n### Q: How do I optimize performance for large datasets?\nA: Switch to Canvas rendering mode by setting the `mode` to 'canvas' in the `initForce` method. This offers better performance for larger datasets.\n\n### Q: Can I integrate ForceLayout with Vuex?\nA: Yes, you can easily dispatch actions or commit mutations from within the directive to store your layout's state in a Vuex store.\n\n### Q: How do I uninstall the module?\nA: To uninstall, simply run `npm uninstall @force-layout/nuxt-module` and remove the related code from your `nuxt.config.js`.\n\n### Q: Is ForceLayout compatible with Nuxt 2?\nNo, it is intended for use with Nuxt 3. \n\nCertainly! Here are some more FAQs that cover a wider range of topics:\n\n### Q: Can I use ForceLayout with TypeScript?\nA: Yes! ForceLayout is TypeScript-friendly. We provide type definitions out of the box to make your development experience smooth.\n\n### Q: Does ForceLayout support 3D layouts?\nA: Currently, ForceLayout focuses on 2D force layouts. However, we're intrigued by the idea of 3D and may consider it for future releases.\n\n### Q: Can I change the color theme dynamically?\nA: Absolutely! You can update the color properties in real-time just like you would with force properties. \n\n### Q: How does ForceLayout handle accessibility?\nA: Accessibility is important to us. We're working on features like ARIA labels and keyboard navigation for future releases.\n\n### Q: What happens if I have a cyclic graph? Will ForceLayout get stuck in an infinite loop?\nA: Don't worry, ForceLayout is designed to handle cyclic graphs gracefully without getting stuck.\n\n### Q: Can I export the layout to different formats like PNG or PDF?\nA: While ForceLayout doesn't natively support this feature yet, you can easily implement it using external libraries.\n\n### Q: Is there a way to pause and resume the force simulation?\nA: Yes, you can pause and resume the force simulation by using the `pause` and `resume` methods exposed by the directive.\n\n### Q: Do I need D3 installed to use ForceLayout?\nA: No, ForceLayout comes with all the necessary D3 components bundled in. You don't need a separate D3 installation.\n\n### Q: My pet parrot loves watching the nodes move. Is that normal?\nA: Absolutely! ForceLayout aims to create engaging and aesthetically pleasing visualizations that can captivate audiences of all species! 🦜\n\n### Q: I'm a time traveler from the year 2050. Will this still work?\nA: While we can't guarantee compatibility with future versions of technology, we do strive to make ForceLayout as future-proof as possible!\n\n---\n\nFeel free to suggest additional questions or modifications! 📝\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-force-layout/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/nuxt-force-layout\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-force-layout.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/nuxt-force-layout\n\n[license-src]: https://img.shields.io/npm/l/nuxt-force-layout.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/nuxt-force-layout\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejfox%2Fnuxt-force-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fejfox%2Fnuxt-force-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejfox%2Fnuxt-force-layout/lists"}