{"id":13392788,"url":"https://github.com/Semantic-UI-Vue/Semantic-UI-Vue","last_synced_at":"2025-03-13T19:31:06.655Z","repository":{"id":24398336,"uuid":"101392311","full_name":"Semantic-UI-Vue/Semantic-UI-Vue","owner":"Semantic-UI-Vue","description":"Semantic UI integration for Vue","archived":false,"fork":false,"pushed_at":"2022-12-10T20:30:18.000Z","size":5020,"stargazers_count":932,"open_issues_count":142,"forks_count":149,"subscribers_count":34,"default_branch":"master","last_synced_at":"2024-10-29T15:19:18.533Z","etag":null,"topics":["components","semantic-ui","semantic-ui-vue","vue","vue-components","vue2","vuejs2"],"latest_commit_sha":null,"homepage":"https://semantic-ui-vue.github.io","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/Semantic-UI-Vue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-25T10:11:54.000Z","updated_at":"2024-09-14T10:48:47.000Z","dependencies_parsed_at":"2023-01-14T03:15:07.162Z","dependency_job_id":null,"html_url":"https://github.com/Semantic-UI-Vue/Semantic-UI-Vue","commit_stats":null,"previous_names":[],"tags_count":79,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Semantic-UI-Vue%2FSemantic-UI-Vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Semantic-UI-Vue%2FSemantic-UI-Vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Semantic-UI-Vue%2FSemantic-UI-Vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Semantic-UI-Vue%2FSemantic-UI-Vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Semantic-UI-Vue","download_url":"https://codeload.github.com/Semantic-UI-Vue/Semantic-UI-Vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243469121,"owners_count":20295691,"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":["components","semantic-ui","semantic-ui-vue","vue","vue-components","vue2","vuejs2"],"created_at":"2024-07-30T17:00:37.233Z","updated_at":"2025-03-13T19:31:06.071Z","avatar_url":"https://github.com/Semantic-UI-Vue.png","language":"JavaScript","funding_links":[],"categories":["Libraries","JavaScript","构架","Components \u0026 Libraries","Frameworks [🔝](#readme)","Frameworks"],"sub_categories":["组件集合","Frameworks","Component Collections"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg\n    src=\"https://raw.githubusercontent.com/Semantic-UI-Vue/Semantic-UI-Vue/master/docs/public/static/images/logo.png\"\n    alt=\"Semantic UI Vue\"\n  /\u003e\n  \u003ch1 align=center\u003eSemantic UI Vue\u003c/h1\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Semantic-UI-Vue/Semantic-UI-Vue/actions\"\u003e\u003cimg src=\"https://github.com/Semantic-UI-Vue/Semantic-UI-Vue/workflows/Build%20and%20Deploy/badge.svg\" alt=\"Pipeline status\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/semantic-ui-vue\"\u003e\u003cimg src=\"https://badge.fury.io/js/semantic-ui-vue.svg\" alt=\"NPM version\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/Semantic-UI-Vue/Semantic-UI-Vue\"\u003e\u003cimg src=\"https://codecov.io/gh/Semantic-UI-Vue/Semantic-UI-Vue/branch/master/graph/badge.svg\" alt=\"codecov\"/\u003e\u003c/a\u003e\u003cbr /\u003e\n  \u003ca href=\"https://gitter.im/Semantic-UI-Vue/Lobby\"\u003e\u003cimg src=\"https://badges.gitter.im/Join%20Chat.svg\" alt=\"Join the chat at https://gitter.im/Semantic-UI-Vue/Lobby\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch4 align=\"center\"\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://semantic-ui-vue.github.io\"\u003eWebsite\u003c/a\u003e\n  ·\n  \u003ca href=\"#-installation\"\u003eInstallation\u003c/a\u003e\n  ·\n  \u003ca href=\"#\"\u003eConfiguration (TBD)\u003c/a\u003e\n\u003c/h4\u003e\n\n\u003ch1 align=\"center\"\u003eLooking for maintainers!\u003c/h1\u003e\n\nThere is a lot to do and few maintainers with little time :). If you'd like to help with this project, please let us know.\n\nSemantic UI Vue is the Vue integration for \u003ca src=\"https://semantic-ui.com/\"\u003eSemantic UI\u003c/a\u003e. It is highly inspired on \u003ca src=\"https://react.semantic-ui.com\"\u003eSemantic UI React\u003c/a\u003e\nIf you have used it already, you will find Semantic UI Vue's API to be almost the same. Semantic UI Vue is still **under heavy development**. Please, feel free to contribute. You can see the feature completion state [here](https://semantic-ui-vue.github.io/#/features)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://codesandbox.io/s/618o6oy16k\"\u003e\u003cimg src=\"https://codesandbox.io/static/img/play-codesandbox.svg\" alt=\"Edit Simple semantic-ui-vue example\"/\u003e\u003c/a\u003e\n\u003cp\u003e\n\n## 🚀 Installation\n\n### JavaScript\n\nThe Semantic UI Vue package can be installed via NPM/Yarn:\n\n```bash\n$ npm install semantic-ui-vue\n# or\n$ yarn add semantic-ui-vue\n```\n\nInstalling Semantic UI Vue provides the JavaScript for your components. You'll also need to include a stylesheet to provide the styling for your components.\n\nOnce Semantic UI Vue has been installed, you will need to import it in your main file (usually `index.js` or `main.js`) and tell Vue to use it:\n\n```js\nimport Vue from 'vue';\nimport SuiVue from 'semantic-ui-vue';\n\n/* ... */\n\nVue.use(SuiVue);\n```\n\nIf you are not using Webpack, you can add the script in your html:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- head --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n    \u003cscript src=\"node_modules/vue/dist/vue.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"node_modules/semantic-ui-vue/dist/umd/semantic-ui-vue.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      Vue.use(SemanticUIVue);\n      var app = new Vue({\n        el: '#app',\n        data: {\n          message: 'Hello Vue!',\n        },\n        template:\n          '\u003cspan\u003e\u003csui-button primary\u003eclick me\u003c/sui-button\u003e{{message}}\u003c/span\u003e',\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nOr, in alternative, you can import it using a CDN:\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/semantic-ui-vue/dist/commonjs/semantic-ui-vue.js\"\u003e\u003c/script\u003e\n```\n\nNow you are ready to go! Check out the components' examples to see how to use them.\n\n### CSS\n\n#### Content Delivery Network (CDN)\n\nYou can use the default Semantic UI stylesheet by including a Semantic UI CDN link in your `index.html` file.\nThis is the quickest way to get started with Semantic UI Vue. You **won't be able to use custom themes** with this method.\n\n\u003e **To avoid unexpected behavior please use only the latest version of Semantic-UI**\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css\"\n/\u003e\n```\n\n#### Semantic UI CSS package\n\nThe Semantic UI CSS package is automatically synced with the main Semantic UI repository to provide a lightweight CSS only version of Semantic UI.\nSemantic UI CSS can be installed as a package in your project using NPM. You **won't be able to use custom themes** with this method.\n\n```bash\n$ npm install semantic-ui-css --save\n# or\n$ yarn add semantic-ui-css\n```\n\nAfter install, you'll need to include the minified CSS file in your index.js file:\n\n```js\nimport 'semantic-ui-css/semantic.min.css';\n```\n\n#### Semantic UI package\n\nInstall the full Semantic UI package.\nSemantic UI includes Gulp build tools so your project can preserve its own theme changes, allowing you to customize the style variables.\n\nDetailed documentation on theming in Semantic UI is provided [here](https://semantic-ui.com/usage/theming.html).\n\n```bash\n$ npm install semantic-ui --save-dev\n# or\n$ yarn add semantic-ui\n```\n\nAfter building the project with Gulp, you'll need to include the minified CSS file in your index.js file:\n\n```js\nimport '../semantic/dist/semantic.min.css';\n```\n\n### Nuxt.js module\n\nYou can use semantic-ui-vue as [nuxt.js](https://github.com/nuxt/nuxt.js) module.\n\nUsage:\n\n- Install semantic-ui-vue and semantic-ui-css packages\n- Install semantic-ui-vue and semantic-ui-css packages\n- Add this into your nuxt.config.js file:\n\n```js\n{\n  modules: [\n    'semantic-ui-vue/nuxt', // includes styles from semantic-ui-css\n    ['semantic-ui-vue/nuxt', { css: false }], // if you have your own semantic-ui styles\n  ];\n}\n```\n\n## 🤝 Contact us!\n\nDo you have a question? Do you want to submit a bug, or suggest an improvement?\n\nPlease contact us! Especially at this stage, we really need this.\n\nTo do so, do not hesitate to [join our chat on Gitter](https://gitter.im/Semantic-UI-Vue/Lobby), or [submit an issue](https://github.com/Semantic-UI-Vue/Semantic-UI-Vue/issues/new) (it doesn't have to be a bug). Read the [CONTRIBUTING.md](https://github.com/Semantic-UI-Vue/Semantic-UI-Vue/blob/master/CONTRIBUTING.md) for more details\n\n\u003cp align=\"center\"\u003e\n  \u003cimg\n    src=\"https://raw.githubusercontent.com/Semantic-UI-Vue/Semantic-UI-Vue/master/docs/public/static/images/logo.png\"\n    alt=\"Semantic UI Vue\"\n  /\u003e\n\u003c/p\u003e\n\n## 📝 License\n\nCopyright © 2019-present, [Mario Lamacchia](https://github.com/mariolamacchia).\u003cbr\u003e\nThis project is [MIT](https://github.com/Semantic-UI-Vue/Semantic-UI-Vue/blob/master/LICENSE.md) licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSemantic-UI-Vue%2FSemantic-UI-Vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSemantic-UI-Vue%2FSemantic-UI-Vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSemantic-UI-Vue%2FSemantic-UI-Vue/lists"}