{"id":19307234,"url":"https://github.com/richplastow/tryout-vue3-threejs-drie","last_synced_at":"2026-05-15T01:36:13.054Z","repository":{"id":183455876,"uuid":"670174197","full_name":"richplastow/tryout-vue3-threejs-drie","owner":"richplastow","description":"Trying out Drie, a react-three-fiber-like Three.js component library for Vue.js.","archived":false,"fork":false,"pushed_at":"2023-07-30T13:27:20.000Z","size":1554,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-09T15:07:52.026Z","etag":null,"topics":["drie","threejs","tryout","vue"],"latest_commit_sha":null,"homepage":"https://richplastow.com/tryout-vue3-threejs-drie","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/richplastow.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2023-07-24T13:04:00.000Z","updated_at":"2023-07-29T11:21:26.000Z","dependencies_parsed_at":"2025-01-06T01:10:43.180Z","dependency_job_id":"00a670c9-bf93-4750-9f73-9df9ef42714c","html_url":"https://github.com/richplastow/tryout-vue3-threejs-drie","commit_stats":null,"previous_names":["richplastow/tryout-vue3-threejs-drie"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/richplastow/tryout-vue3-threejs-drie","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richplastow%2Ftryout-vue3-threejs-drie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richplastow%2Ftryout-vue3-threejs-drie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richplastow%2Ftryout-vue3-threejs-drie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richplastow%2Ftryout-vue3-threejs-drie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/richplastow","download_url":"https://codeload.github.com/richplastow/tryout-vue3-threejs-drie/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richplastow%2Ftryout-vue3-threejs-drie/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33050336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-14T02:00:06.663Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["drie","threejs","tryout","vue"],"created_at":"2024-11-10T00:10:07.921Z","updated_at":"2026-05-15T01:36:13.023Z","avatar_url":"https://github.com/richplastow.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tryout-vue3-threejs-drie\n\n__Trying out Drie, a react-three-fiber-like Three.js component library for Vue.js.__\n\n-\u0026nbsp; __Version:__ 0.0.1  \n-\u0026nbsp; __Repo:__ \u003chttps://github.com/richplastow/tryout-vue3-threejs-drie\u003e  \n-\u0026nbsp; __Homepage:__ \u003chttps://richplastow.com/tryout-vue3-threejs-drie\u003e\n\n## Recommended IDE Setup\n\n[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).\n\n## Type Support for `.vue` Imports in TS\n\nTypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.\n\nIf the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:\n\n1. Disable the built-in TypeScript Extension\n    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette\n    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`\n2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.\n\n## Customize configuration\n\nSee [Vite Configuration Reference](https://vitejs.dev/config/).\n\n## Project Setup\n\n```sh\nnpm install\n```\n\n### Compile and Hot-Reload for Development\n\n```sh\nnpm run dev\n```\n\n### Type-Check, Compile, Minify and Serve Locally for Production\n\n```sh\nnpm run start\n```\n\n### Run Unit Tests with [Vitest](https://vitest.dev/)\n\n```sh\nnpm run test:unit\n```\n\n### Run End-to-End Tests with [Playwright](https://playwright.dev)\n\n```sh\n# Install browsers for the first run\nnpx playwright install\n\n# When testing on CI, must build the project first\nnpm run build\n\n# Runs the end-to-end tests\nnpm run test:e2e\n# Runs the tests only on Chromium\nnpm run test:e2e -- --project=chromium\n# Runs the tests of a specific file\nnpm run test:e2e -- tests/example.spec.ts\n# Runs the tests in debug mode\nnpm run test:e2e -- --debug\n```\n\n### Lint with [ESLint](https://eslint.org/)\n\n```sh\nnpm run lint\n```\n\n## How to create a project like this\n\n1. Create the GitHub repo, and in Settings -\u003e Pages -\u003e Branch choose 'main' and\n   '/docs'\n2. `git clone git@github.com:\u003cGITHUB_USERNAME\u003e/tryout-vue3-threejs-drie.git`\n3. `cd tryout-vue3-threejs-drie`\n4. Follow the ['Creating a Vue Application' Quick Start:\n   ](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)\n   ```\n   npm init vue@latest\n\n   Need to install the following packages:\n     create-vue@3.7.1\n   Ok to proceed? (y) \n   \n   Vue.js - The Progressive JavaScript Framework\n   \n   ✔ Project name: … tryout-vue3-threejs-drie\n   ✔ Add TypeScript? … Yes\n   ✔ Add JSX Support? … Yes\n   ✔ Add Vue Router for Single Page Application development? … Yes\n   ✔ Add Pinia for state management? … Yes\n   ✔ Add Vitest for Unit Testing? … Yes\n   ✔ Add an End-to-End Testing Solution? › Playwright\n   ✔ Add ESLint for code quality? … Yes\n   ✔ Add Prettier for code formatting? … Yes\n   \n   Scaffolding project in /Users/ ... /tryout-vue3-threejs-drie...\n   ```\n5. Move everything apart from the README.md out of the newly created folder\n   into the top level of the repo, and delete that folder (note that there are\n   invisible items, whose filenames start with a '.')\n6. In package.json, correct the version and private values, and add description,\n   repository, keywords, author, license, bugs and homepage\n7. Also in package.json, append ` --ignore-pattern /docs/` to the `lint` script\n8. `npm install` installs 468 packages with 0 vulnerabilities:  \n   199.7 MB for 13,826 items\n9. Add `base: '/tryout-vue3-threejs-drie/',` to vite.config.ts\n10. `npm run format \u0026\u0026 npm run dev`  \n    and open \u003chttp://127.0.0.1:5173/tryout-vue3-threejs-drie/\u003e\n11. Assuming you have the NPM module `static-server` installed globally,  \n    `npm run build \u0026\u0026 mv dist tryout-vue3-threejs-drie \u0026\u0026 static-server`  \n    and open \u003chttp://127.0.0.1:9080/tryout-vue3-threejs-drie/\u003e\n12. `mv tryout-vue3-threejs-drie docs` - ready for GitHub Pages\n13. Follow the [Drie Getting Started Guide\n   ](https://www.drie.dev/guide/getting-started) to install dependencies\n   @janvorisek/drie, three and dev-dependency @types/three:  \n   10 packages with 0 vulnerabilities, 46.9 MB for 1,997 items\n14. Use the [Drie plugin\n    ](https://www.drie.dev/guide/getting-started#vue-3-plugin) by just adding  \n    `import drie from '@janvorisek/drie'` and  \n    `app.use(drie)` to src/main.ts\n15. Replace src/views/HomeView.vue with the [Drie 'Basic setup' example\n    ](https://www.drie.dev/examples/basic-setup#code)  \n    (the `import`s are not needed, because of `app.use(drie)` in src/main.ts)\n16. You should see the blue box, and be able to rotate it by dragging\n\n\u003c!-- 200,173,295 bytes (46.9 MB on disk) for 15,836 items --\u003e\n\u003c!-- 203,696,927 bytes (252.4 MB on disk) for 15,823 items --\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichplastow%2Ftryout-vue3-threejs-drie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frichplastow%2Ftryout-vue3-threejs-drie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichplastow%2Ftryout-vue3-threejs-drie/lists"}