{"id":13824500,"url":"https://github.com/patrickcate/vue-uswds","last_synced_at":"2025-03-19T22:30:52.203Z","repository":{"id":36974431,"uuid":"407870605","full_name":"patrickcate/vue-uswds","owner":"patrickcate","description":"A Vue 3 implementation of the USWDS.","archived":false,"fork":false,"pushed_at":"2024-04-11T15:23:19.000Z","size":43635,"stargazers_count":7,"open_issues_count":11,"forks_count":3,"subscribers_count":4,"default_branch":"develop","last_synced_at":"2024-04-11T17:34:01.496Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://patrickcate.github.io/vue-uswds/","language":"JavaScript","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/patrickcate.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}},"created_at":"2021-09-18T13:39:45.000Z","updated_at":"2024-04-15T12:54:41.329Z","dependencies_parsed_at":"2023-12-15T15:24:04.072Z","dependency_job_id":"8098240b-44d5-4dce-9d0c-40faf2bb4d96","html_url":"https://github.com/patrickcate/vue-uswds","commit_stats":{"total_commits":716,"total_committers":3,"mean_commits":"238.66666666666666","dds":"0.40642458100558654","last_synced_commit":"a93e288cd245835938d28381a667a5a9af0a040f"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickcate%2Fvue-uswds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickcate%2Fvue-uswds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickcate%2Fvue-uswds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickcate%2Fvue-uswds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patrickcate","download_url":"https://codeload.github.com/patrickcate/vue-uswds/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244515616,"owners_count":20464920,"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:03.795Z","updated_at":"2025-03-19T22:30:51.313Z","avatar_url":"https://github.com/patrickcate.png","language":"JavaScript","funding_links":[],"categories":["Packages","Components \u0026 Libraries"],"sub_categories":["Frameworks"],"readme":"\u003c!-- markdownlint-disable-next-line --\u003e\n\u003cimg width=\"300\" src=\"media/logo.svg\" alt=\"Vue-USWDS logo\"\u003e\n\n# Vue USWDS\n\n[![Tests](https://github.com/patrickcate/vue-uswds/actions/workflows/tests.yml/badge.svg)](https://github.com/patrickcate/vue-uswds/actions/workflows/tests.yml) [![Docs](https://github.com/patrickcate/vue-uswds/actions/workflows/docs.yml/badge.svg)](https://github.com/patrickcate/vue-uswds/actions/workflows/docs.yml) [![codecov](https://codecov.io/gh/patrickcate/vue-uswds/branch/develop/graph/badge.svg?token=3R49R79IKK)](https://codecov.io/gh/patrickcate/vue-uswds) ![GitHub package.json dependency version (dev dep on branch)](https://img.shields.io/github/package-json/dependency-version/patrickcate/vue-uswds/dev/@uswds/uswds) [![semantic-release](https://img.shields.io/badge/semantic--release-e10079?logo=semantic-release\u0026labelColor=494949\u0026color=d90f7c)](https://github.com/semantic-release/semantic-release)\n\nA Vue 3 implementation of the [USWDS](https://designsystem.digital.gov). If you need Vue 2 support, check out the [USWDS-Vue](https://github.com/thepipster/uswds-vue) library.\n\nA [Nuxt 3 integration module](https://github.com/patrickcate/nuxt-uswds) is available.\n\n## [Documentation](https://patrickcate.github.io/vue-uswds/)\n\n## Installation\n\n**Note:** You will need to install the [USWDS](https://designsystem.digital.gov) CSS separately.\n\nVue USWDS can be installed either by including it with a simple `script` tag or using NPM and a build system.\n\n### Script Tag\n\nThe easiest way to include the library with a script tag is to use a CDN such as [jsDelivr](https://www.jsdelivr.com) or [unpkg](https://unpkg.com). You can also load the library locally on your server.\n\nWhen using with a script tag all components will be imported.\n\n```html\n\u003cscript src=\"https://unpkg.com/vue@3\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vue-uswds\"\u003e\u003c/script\u003e\n```\n\n### NPM (Node Package Manager)\n\n```shell\nnpm install vue-uswds\n\n// or\n\nyarn install vue-uswds\n```\n\n## Usage\n\nWhen importing the library via NPM you can import all components or use the _À La Carte_ method to import only specific components. The _À La Carte_ method makes it easier to reduce the final bundle size of your application by only including components you are using.\n\n### All Components\n\n```javascript\nimport Vue from 'vue'\nimport VueUswds from 'vue-uswds'\n\nconst app = Vue.createApp({})\n\napp.use(VueUswds, {\n  // ...options\n})\n\napp.mount('#app')\n```\n\n### À La Carte\n\n```javascript\n// App.vue\nimport Vue from 'vue'\nimport VueUswds from 'vue-uswds/core' // Import only the core library.\n\nconst app = Vue.createApp({})\n\napp.use(VueUswds, {\n  // ...options\n})\n\napp.mount('#app')\n```\n\n```js\n// MyComponent.vue\n\u003cscript\u003e\nimport { UsaTag } from 'vue-uswds/components'\n\nexport default {\n  components: { UsaTag },\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cUsaTag\u003eMy Custom Tag\u003c/UsaTag\u003e\n\u003c/template\u003e\n```\n\nIf there are components you wish to use anywhere in your app without first importing them, you can register them globally.\n\n```javascript\n// App.vue\nimport Vue from 'vue'\nimport VueUswds from 'vue-uswds/core' // Import only the core library.\nimport { UsaTag } from 'vue-uswds/components'\n\nconst app = Vue.createApp({})\n\napp.use(VueUswds, {\n  // ...options\n})\n\n// Register any global components...\napp.component('UsaTag', UsaTag)\n\napp.mount('#app')\n```\n\n## Recommended IDE Setup\n\n- [VSCode](https://code.visualstudio.com)\n- [Volar](https://marketplace.visualstudio.com/items?itemName=vue.volar)\n\n## Contributing Guidelines\n\n- Create an issue for any bugs or feature requests before doing any work.\n- This project follows [Conventional Commits](https://www.conventionalcommits.org) naming conventions for all git commits.\n  - The git commit format can be easily generated by running `npm run commit` which will use [Comittizen](https://github.com/commitizen/cz-cli) to walk you through the formatting options of your commit.\n- This project uses `npm`, not `yarn` or `pnpm`.\n- [Prettier](https://prettier.io) and [ESLint](https://eslint.org) are run as pre-commit hooks to help maintain a consistent code style. They are also run with any PR's submitted.\n- [Cypress](https://www.cypress.io) is used for all component tests.\n  - _All components must have tests_.\n  - Cypress can be run locally, but will also run with all PR's.\n  - Tests must pass in order for PR's to be merged.\n  - See the \"Tests\" section of this README for commands to run tests locally.\n- [Storybook](https://storybook.js.org/) is used for documentation.\n  - _All components must have a story_.\n  - You can preview Storybook locally by running `npm run storybook`.\n- Vue's [composition API](https://vuejs.org/guide/introduction.html#composition-api) is preferred over the [options API](https://vuejs.org/guide/introduction.html#options-api).\n\n## Testing Github Actions Locally\n\nUse [act](https://github.com/nektos/act) to test Github actions locally.\n\n**Note:** Because the [act](https://github.com/nektos/act) docker containers do not have the XVFB dependency installed, you must use a custom docker container from Cypress by adding:\n\n```yaml\ncontainer:\n  image: cypress/browsers:node14.17.0-chrome91-ff89\n```\n\nThe specific container can be one of [Cypress's docker images](https://github.com/cypress-io/cypress-docker-images).\n\nYou may also need to temporarily adjust the node matrix versions to use the provided by the Cypress container.\n\n# Tests\n\nSpecific Cypress component tests:\n\n```shell\nnode_modules/.bin/cypress run-ct  --spec=\"src/components/UsaDatePickerCalendar/UsaDatePickerCalendar.test.js\" --headed --no-exit\n```\n\nAll Cypress component tests headless:\n\n```shell\nnpm run test:component\n```\n\nHeaded Cypress interactive component tests:\n\n```shell\nnpm run cypress:open-ct\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickcate%2Fvue-uswds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrickcate%2Fvue-uswds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickcate%2Fvue-uswds/lists"}