{"id":15136371,"url":"https://github.com/nextcloud-libraries/nextcloud-vue","last_synced_at":"2026-03-15T19:51:34.062Z","repository":{"id":37734568,"uuid":"129395002","full_name":"nextcloud-libraries/nextcloud-vue","owner":"nextcloud-libraries","description":"🍱 Vue.js components for Nextcloud app development ✌ https://npmjs.org/@nextcloud/vue","archived":false,"fork":false,"pushed_at":"2025-12-22T17:29:48.000Z","size":191690,"stargazers_count":239,"open_issues_count":234,"forks_count":95,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-12-23T09:24:12.981Z","etag":null,"topics":["hacktoberfest","nextcloud","nextcloud-design","vue-components","vuejs","vuejs-components","vuejs2"],"latest_commit_sha":null,"homepage":"https://nextcloud-vue-components.netlify.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nextcloud-libraries.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":"AUTHORS.md","dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-04-13T11:48:45.000Z","updated_at":"2025-12-22T16:12:24.000Z","dependencies_parsed_at":"2023-12-24T21:30:48.000Z","dependency_job_id":"501feecb-c1e3-4ef5-8c58-31056cbfeeb3","html_url":"https://github.com/nextcloud-libraries/nextcloud-vue","commit_stats":{"total_commits":5968,"total_committers":85,"mean_commits":70.21176470588236,"dds":0.7928954423592494,"last_synced_commit":"1b82bced407559d490f2dd8edf0589fbf1a2aeb7"},"previous_names":["nextcloud-libraries/nextcloud-vue","nextcloud/nextcloud-vue","nextcloud/vue-components"],"tags_count":290,"template":false,"template_full_name":null,"purl":"pkg:github/nextcloud-libraries/nextcloud-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcloud-libraries%2Fnextcloud-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcloud-libraries%2Fnextcloud-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcloud-libraries%2Fnextcloud-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcloud-libraries%2Fnextcloud-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextcloud-libraries","download_url":"https://codeload.github.com/nextcloud-libraries/nextcloud-vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcloud-libraries%2Fnextcloud-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28006375,"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","status":"online","status_checked_at":"2025-12-24T02:00:07.193Z","response_time":83,"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":["hacktoberfest","nextcloud","nextcloud-design","vue-components","vuejs","vuejs-components","vuejs2"],"created_at":"2024-09-26T06:21:24.920Z","updated_at":"2025-12-24T19:04:00.674Z","avatar_url":"https://github.com/nextcloud-libraries.png","language":"Vue","readme":"\u003c!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n--\u003e\n\n# @nextcloud/vue\n\n[![npm last version](https://img.shields.io/npm/v/@nextcloud/vue.svg?style=flat)](https://www.npmjs.com/package/@nextcloud/vue)\n[![Dependabot status](https://img.shields.io/badge/Dependabot-enabled-brightgreen.svg?longCache=true\u0026style=flat\u0026logo=dependabot)](https://dependabot.com)\n\n\u003e 🖼️ UI Kit for building Nextcloud apps with Vue\n\n- ✨ Standardized UI Components\n- 🛠️ Composables and frontend utilities\n- 🔗 [Reference providers](https://docs.nextcloud.com/server/latest/developer_manual/digging_deeper/reference.html) utilities\n\n## 📄 Documentation\n\n| Version        | Target                | Documentation                                         |\n|----------------|-----------------------|-------------------------------------------------------|\n| v9.x [main]    | Nextcloud 31+ (Vue 3) | https://nextcloud-vue-components.netlify.app          |\n| v8.x [stable8] | Nextcloud 28+ (Vue 2) | https://stable8--nextcloud-vue-components.netlify.app |\n| v7.x [stable7] | Nextcloud 25 - 27     | https://stable7--nextcloud-vue-components.netlify.app |\n| v6.x [stable6] | Nextcloud 24 - 25     | https://stable6--nextcloud-vue-components.netlify.app |\n\n## 📦 Install\n\n```bash\nnpm i @nextcloud/vue@next\n```\n\n## 🚀 Usage\n\nImport corresponding components and other modules on use. Check the documentation for more details.\n\n```js\nimport NcButton from '@nextcloud/vue/components/NcButton'\nimport { useHotKey } from '@nextcloud/vue/composables/useHotKey'\n```\n\nImport from a single root is available as well. Use with caution: this might lead to slower build time and larger bundles in some cases.\n\n```js\nimport { NcButton, useHotKey } from '@nextcloud/vue'\n```\n\n## 🤝 Contributing\n\n### 📜 How to contribute\n\n1. It's always good to check/create an issue first and discuss the problem or feature you want to work on\n2. Fork the repository and create a new branch\n3. Make the changes\n4. Check the change in Vue-Styleguidist and/or Nextcloud apps\n   - Do not forget to `lint` and `test` your changes\n   - If possible, add tests and documentation for your changes\n5. Commit and push your changes, create a Pull Request\n   - Make sure to follow the [Conventional Commits](https://www.conventionalcommits.org) in commit messages, and PR titles, for example:\\\n     `fix(NcButton): correct layout on Safari`\n   - Make sure to follow the **Pull Request template**\n   - Sign-off you commits for the [Developer Certificate of Origin (DCO)](https://developercertificate.org/)\n6. Get your PR reviewed\n   - If you don't receive a feedback in a week, feel free to mention the maintainers, for example, last developers worked on the module\n7. Get your PR merged \n\nPlease read the [Code of Conduct](https://nextcloud.com/community/code-of-conduct/). This document offers some guidance to ensure Nextcloud participants can cooperate effectively in a positive and inspiring atmosphere and to explain how together we can strengthen and support each other.\n\nMore information on how to contribute: [https://nextcloud.com/contribute/](https://nextcloud.com/contribute/)\n\n### 🧑‍💻 Development setup\n\nFirst, install dependencies with `npm`:\n\n```sh\nnpm ci\n```\n\n#### 🐸 Development with Styleguidist\n\nThe simplest way to develop and debug `@nextcloud/vue` is to use our live documentation via [`vue-styleguidist`](https://vue-styleguidist.github.io). \n\nRun the development server with component documentation and playground:\n```sh\nnpm run styleguide\n```\n\nYou can also test if the design still works with a legacy Nextcloud version by setting `NEXTCLOUD_LEGACY` ENV variable.\n\n```sh\nNEXTCLOUD_LEGACY=y npm run styleguide\n```\n\n#### ☁️ Development with Nextcloud apps\n\nTo test or debug `@nextcloud/vue` in Nextcloud app you need to [pack](https://docs.npmjs.com/cli/v11/commands/npm-pack) the library and **install** it in the app.\n\n1. In `nextcloud-vue`:\n   1. Build the library with:\n      - `npm run dev` for development build\n      - `npm run build` for production build\n   2. Pack with `npm pack`\n2. In the Nextcloud app:\n   1. Install the packed file by path to the file, for example:\n      ```sh\n      npm install --no-save ../../../nextcloud-vue-9.3.1.tgz\n      ```\n   2. Rebuild the app or run it in `watch` mode\n   3. To remove the linked package, reinstall dependencies with `npm ci`\n3. Repeat every time you do a change in `@nextcloud/vue`\n4. Do not commit the created `.tgz` file\n\n\u003e [!WARNING]\n\u003e Do not use `npm link`\n\u003e\n\u003e While it is a simple and popular way to connect a local npm package to another package, it doesn't have proper dependency resolution which leads to issues. Adding a package via `npm pack` does exactly the same as installing a published package.\n\n### 🌐 Translations\n\nUse `t` and `n` functions from `src/l10n.js` to display translated strings. They follow `gettext` and `ngettext` interface from [`@nextcloud/l10n/gettext`](https://nextcloud-libraries.github.io/nextcloud-l10n/modules/_nextcloud_l10n_gettext.html).\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { t } from '../../l10n.js'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n\t\u003celement\u003e\n\t\t{{ t('Choose') }}\n\t\u003c/element\u003e\n\u003c/template\u003e\n```\n\nWhen you edit/create a translated string, you need to update the l10n files.\nOur awesome translation community will then be notified and a bot will sync translations automatically.\n\n```sh\nnpm run l10n:extract\n```\n\n## 📤 Releasing a new version\n\n- Pull the latest changes from `main` or `stableX`\n- Checkout a new branch with the tag name (e.g `v4.0.1`): `git checkout -b v\u003cversion\u003e`\n- Run `npm version patch --no-git-tag-version` (`npm version minor --no-git-tag-version` if minor).\n  This will return a new version name, make sure it matches what you expect\n- Generate the changelog content from the [release](https://github.com/nextcloud-libraries/nextcloud-vue/releases) page.\n  Create a draft release, select the previous tag, click `generate` then paste the content to the `CHANGELOG.md` file\n  1. adjust the links to the merged pull requests and authors so that the changelog also works outside of GitHub\n     by running `npm run prerelease:format-changelog`.\n     This will apply this regex: `by @([^ ]+) in ((https://github.com/)nextcloud-libraries/nextcloud-vue/pull/(\\d+))`\n     Which this as the replacement: `[\\#$4]($2) \\([$1]($3$1)\\)`\n  2. use the the version as tag AND title (e.g `v4.0.1`)\n  3. add the changelog content as description (https://github.com/nextcloud-libraries/nextcloud-vue/releases)\n- Commit, push and create PR\n- Get your PR reviewed and merged\n- Create a milestone with the follow-up version at https://github.com/nextcloud-libraries/nextcloud-vue/milestones\n- Move all open tickets and PRs to the follow-up\n- Close the milestone of the version you release\n- Publish the previously drafted release on GitHub\n  ![image](https://user-images.githubusercontent.com/14975046/124442568-2a952500-dd7d-11eb-82a2-402f9170231a.png)\n\n\u003ca href=\"https://www.netlify.com\"\u003e\n  \u003cimg src=\"https://www.netlify.com/img/global/badges/netlify-dark.svg\"/\u003e\n\u003c/a\u003e\n\n### Releasing a pre-release\n\nA pre-release can be built in the same way as described above, however it requires manual adjustments to avoid that npm ships the pre-release to all users:\n\n1. Retag latest to the last stable release\n\n    npm dist-tag add @nextcloud/vue@5.4.0 latest\n\n2. Tag the new pre-release as next\n\n    npm dist-tag add @nextcloud/vue@6.0.0-beta.2 next\n","funding_links":[],"categories":["Vue"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextcloud-libraries%2Fnextcloud-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextcloud-libraries%2Fnextcloud-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextcloud-libraries%2Fnextcloud-vue/lists"}