{"id":18448121,"url":"https://github.com/staticmania/keep-vue","last_synced_at":"2025-04-15T09:29:10.975Z","repository":{"id":245990592,"uuid":"718571278","full_name":"StaticMania/keep-vue","owner":"StaticMania","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-07T06:40:21.000Z","size":2947,"stargazers_count":25,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T18:51:48.367Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vue.keepdesign.io","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/StaticMania.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License","code_of_conduct":"CODE_OF_CONDUCT.md","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-14T11:09:18.000Z","updated_at":"2025-02-07T06:40:13.000Z","dependencies_parsed_at":"2024-06-25T08:46:07.168Z","dependency_job_id":"1ec7ba66-0bb6-4a8e-8965-154f43f76561","html_url":"https://github.com/StaticMania/keep-vue","commit_stats":null,"previous_names":["staticmania/keep-vue"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StaticMania%2Fkeep-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StaticMania%2Fkeep-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StaticMania%2Fkeep-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StaticMania%2Fkeep-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StaticMania","download_url":"https://codeload.github.com/StaticMania/keep-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249042561,"owners_count":21203313,"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-06T07:15:02.747Z","updated_at":"2025-04-15T09:29:10.969Z","avatar_url":"https://github.com/StaticMania.png","language":"Vue","readme":"# Keep Vue\n\nKeep Vue is an open-source component library built on Tailwind CSS and React.js. It provides a versatile set of pre-designed UI components that enable developers to streamline the creation of modern, responsive, and visually appealing web applications.\n\n![Keep Vue](./public/images/readme.png)\n\n## Table of Contents\n\n- [Keep Vue](#keep-vue)\n  - [Table of Contents](#table-of-contents)\n  - [Installation](#installation)\n    - [Vue Application](#vue-application)\n    - [Nuxt JS Application](#nuxt-js-application)\n  - [usage](#usage)\n  - [Components](#components)\n  - [Contributing](#contributing)\n  - [Figma](#figma)\n  - [License](#license)\n\n## Installation\n\n## Vue Application\n\nSetting Up Keep Vue in vue Application\n\n`Step 1:` Create a vue Application\n\n```console\nnpm create vite@latest my-project -- --template vue\ncd my-project\n```\n\n`Step 2:` Install Tailwind CSS\n\n```console\nnpm i autoprefixer postcss tailwindcss\nnpx tailwindcss init -p\n```\n\n`Step 3:` Install Keep Vue:\n\n```console\nnpm i keep-vue @phosphor-icons/vue\n```\n\nOr with Yarn\n\n```console\nyarn add keep-vue @phosphor-icons/vue\n```\n\nOr with Pnpm\n\n```console\npnpm add keep-vue @phosphor-icons/vue\n```\n\n`Step 4:` Go to the `tailwind.config.js` file and paste the\nfollowing code:\n\n```tsx\nimport { keepTheme } from \"keep-vue/keepTheme\";\n\nconst config = {\n  content: [\"./index.html\", \"./src/**/*.{vue,js,ts,jsx,tsx}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};\nexport default keepTheme(config);\n```\n\n```tailwind.config.ts\nimport type { Config } from 'tailwindcss'\n\n  import { keepTheme } from \"keep-vue/keepTheme\";\nconst config : Config = {\n    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],\n    theme: {\n      extend: {}\n    },\n    plugins: []\n  }\nexport default keepTheme(config);\n```\n\n`Step 5:` Add Tailwind CSS to src/main.css File:\n\n```css\n@import \"keep-vue/css\";\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nCongratulations! You have successfully installed the Keep Vue on your nuxt application. Now you can import any component from keep-vue and use it in your project.\n\n```tsx\n import { Button } from \"keep-vue\";\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cButton\u003eKeep Vue\u003c/Button\u003e\n\u003c/template\u003e\n```\n\n## Nuxt JS Application\n\nYou can easily integrate `keep-vue` into your Nuxt.js application.\n\n`Step 1:` Install Nuxt JS Application\n\nwith npx\n\n```console\nnpx nuxi@latest init \u003cproject-name\u003e\n```\n\nOr with Yarn\n\n```console\nyarn dlx nuxi@latest init \u003cproject-name\u003e\n```\n\nOr with pnpm\n\n```console\npnpm dlx nuxi@latest init \u003cproject-name\u003e\n```\n\n`Step 2:` Install Tailwind module for Nuxt\n\nwith npm\n\n```console\nnpx nuxi@latest module add tailwindcss\nnpx tailwindcss init\n```\n\nOr with Yarn\n\n```console\nyarn add -D @nuxtjs/tailwindcss\nnpx tailwindcss init\n```\n\nif you use yarn for installing tailwind then you need to add the tailwind module in the `nuxt.config.js` file manually.\n\n```tsx\n  modules: [\n  //rest modules...\n '@nuxtjs/tailwindcss'\n  ],\n```\n\n`Step 3:` Install Keep Vue\n\nwith npm\n\n```console\nnpm i keep-vue\nnpm install --save-dev nuxt-phosphor-icons\n```\n\nOr with yarn\n\n```console\nyarn add keep-vue\nyarn add --dev nuxt-phosphor-icons\n```\n\nOr with pnpm\n\n```console\npnpm add keep-vue\npnpm add -D nuxt-phosphor-icons\n```\n\nif you use yarn or pnpm for installing phosphor Icon then you need to add the `nuxt-phosphor-icons` module in the `nuxt.config.js` file manually.\n\n```tsx\n  modules: [\n    \"nuxt-phosphor-icons\",\n  ],\n```\n\n`Step 4:` Go to the `tailwind.config.js` file and paste the\nfollowing code\n\n```js\nimport { keepTheme } from \"keep-vue/keepTheme\";\nmodule.exports = keepTheme({\n  content: [\n    \"./components/**/*.{js,vue,ts}\",\n    \"./layouts/**/*.vue\",\n    \"./pages/**/*.vue\",\n    \"./plugins/**/*.{js,ts}\",\n    \"./app.vue\",\n    \"./error.vue\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n});\n```\n\n```ts\nimport { keepTheme } from \"keep-vue/keepTheme\";\nimport type { Config } from \"tailwindcss\";\n\nconst config: Config = keepTheme({\n  content: [\n    \"./components/**/*.{js,vue,ts}\",\n    \"./layouts/**/*.vue\",\n    \"./pages/**/*.vue\",\n    \"./plugins/**/*.{js,ts}\",\n    \"./app.vue\",\n    \"./error.vue\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n});\nexport default config;\n```\n\n`Step 5:` Create a style folder and then add Tailwind CSS to `main.css` File:\n\n```css\n@import \"keep-vue/css\";\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nCongratulations! You have successfully installed the Keep Vue on your nuxt application. Now you can import any component from keep-vue and use it in your project.\n\n## usage\n\n```jsx\nimport { Button } from \"keep-vue\";\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cButton\u003eKeep Vue\u003c/Button\u003e\n\u003c/template\u003e\n```\n\n## Components\n\nThe Keep Vue offers a wide range of components to build your user interfaces. For detailed usage and examples of each component, refer to our [component documentation](https://vue.keepdesign.io/docs/getting-started/introduction).\n\n## Contributing\n\nIf you want to contribute to the Keep Vue, you can follow the [contributing guide](https://github.com/StaticMania/keep-vue/blob/main/Contribute.md).\n\n## Contributors\n\nThis project exists thanks to all the people who contribute:\n\n\u003ca href=\"https://github.com/StaticMania/keep-vue/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=StaticMania/keep-vue\"/\u003e\n\u003c/a\u003e\n\n## Figma\n\nIf you need access to Figma design files for the components, you can check out our website for more information:\n\n[Get access to the Figma design files](https://keepdesign.io)\n\n## License\n\nThe keep-vue name and logos are trademarks of StaticMania.\n\n[Read about the licensing terms](https://github.com/StaticMania/keep-vue/blob/main/License)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstaticmania%2Fkeep-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstaticmania%2Fkeep-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstaticmania%2Fkeep-vue/lists"}