{"id":14905,"library":"semantic-ui-vue","title":"Semantic UI Vue","description":"semantic-ui-vue is a Vue.js integration of the Semantic UI CSS framework, aiming to provide a component library with an API highly inspired by Semantic UI React. The latest stable version, 0.11.0, was released in June 2020. The project's release cadence appears to be stalled, with the last significant activity occurring over four years ago. A key differentiator is its goal of mirroring the Semantic UI React API, making it potentially familiar to developers transitioning between React and Vue. However, the project is explicitly seeking maintainers and states it is 'under heavy development' despite the lack of recent updates, which is a significant point of concern for stability and ongoing support. Users must manually include Semantic UI CSS stylesheets as a separate step for the components to render correctly.","status":"abandoned","version":"0.11.0","language":"javascript","source_language":"en","source_url":"https://github.com/Semantic-UI-Vue/Semantic-UI-Vue","tags":["javascript"],"install":[{"cmd":"npm install semantic-ui-vue","lang":"bash","label":"npm"},{"cmd":"yarn add semantic-ui-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add semantic-ui-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vue.js framework integration. Primarily compatible with Vue 2.","package":"vue","optional":false},{"reason":"Provides the necessary styling for Semantic UI components. Required for components to render correctly.","package":"semantic-ui-css","optional":false}],"imports":[{"note":"Main plugin import for ES Modules. Typically used with Vue.use(SuiVue) for global component registration.","wrong":"import { SuiVue } from 'semantic-ui-vue';","symbol":"SuiVue","correct":"import SuiVue from 'semantic-ui-vue';"},{"note":"CommonJS require pattern for Node.js environments or older bundlers.","symbol":"SuiVue","correct":"const SuiVue = require('semantic-ui-vue');"},{"note":"While Vue.use(SuiVue) registers all components globally, individual components like SuiButton *may* be importable as named exports for better tree-shaking in modern bundler setups. This pattern is not explicitly highlighted in the official documentation but is common in similar libraries.","symbol":"SuiButton","correct":"import { SuiButton } from 'semantic-ui-vue';"}],"quickstart":{"code":"import Vue from 'vue';\nimport SuiVue from 'semantic-ui-vue';\n\n// Ensure Semantic UI CSS is loaded. For example, by importing 'semantic-ui-css/semantic.min.css'\n// or including a CDN link in your index.html: <link rel=\"stylesheet\" href=\"//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css\" />\n\nVue.use(SuiVue);\n\nnew Vue({\n  el: '#app',\n  data: {\n    message: 'Hello from Semantic UI Vue!'\n  },\n  template: `\n    <div class=\"ui container\" style=\"margin-top: 20px;\">\n      <sui-header as=\"h2\">\n        <sui-icon name=\"settings\" />\n        <sui-header-content>\n          My Application\n          <sui-header-subheader>Manage your preferences</sui-header-subheader>\n        </sui-header-content>\n      </sui-header>\n      <sui-button primary @click=\"message = 'Button Clicked!'\">\n        Click Me\n      </sui-button>\n      <sui-button secondary>\n        Secondary\n      </sui-button>\n      <p style=\"margin-top: 15px;\">{{ message }}</p>\n    </div>\n  `\n});","lang":"javascript","description":"This quickstart demonstrates how to set up Semantic UI Vue by globally registering the plugin with Vue 2 and then using various Semantic UI components like buttons and headers, highlighting the required external CSS import for proper styling."},"warnings":[{"fix":"Consider migrating to a more actively maintained Vue UI library (e.g., Vuetify, PrimeVue, Quasar) or a Semantic UI-compatible library with active development.","message":"The `semantic-ui-vue` project appears to be abandoned or in a severely unmaintained state. The last release was in June 2020, and the `README` explicitly states 'Looking for maintainers!'. This indicates a high risk of no further updates, bug fixes, or compatibility improvements, especially for newer Vue versions.","severity":"breaking","affected_versions":">=0.11.0"},{"fix":"Ensure you include the Semantic UI CSS, for example, by adding `<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css' />` to your `index.html` or importing it in your main CSS/JS file if using a build system.","message":"Semantic UI Vue components require the Semantic UI CSS stylesheet to be included separately. Without the `semantic.min.css` file (either via CDN or the `semantic-ui-css` npm package), components will render unstyled, appearing as plain HTML elements.","severity":"gotcha","affected_versions":"*"},{"fix":"For Vue 3 projects, seek a UI library specifically designed for Vue 3. If migrating an existing Vue 2 project using `semantic-ui-vue` to Vue 3, plan to replace this library with a Vue 3 compatible alternative.","message":"This library is primarily built for Vue 2. It is highly unlikely to be compatible with Vue 3 due to breaking changes in Vue's API, component registration, and reactivity system. Attempting to use `semantic-ui-vue` with Vue 3 will likely result in runtime errors.","severity":"breaking","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `Vue.use(SuiVue);` is called in your main application entry file (e.g., `main.js` or `index.js`) before your Vue app is instantiated.","cause":"The Semantic UI Vue plugin (`SuiVue`) has not been registered globally with Vue.","error":"Unknown custom element: `<sui-button>` - did you register the component correctly?"},{"error":"TypeError: Cannot read properties of undefined (reading 'install')"},{"fix":"Verify the import statement: `import SuiVue from 'semantic-ui-vue';` for ESM or `const SuiVue = require('semantic-ui-vue');` for CommonJS. If using script tags, ensure `semantic-ui-vue.min.js` is loaded after `vue.min.js`.","cause":"The `SuiVue` object was not correctly imported or is undefined, often due to incorrect `require()` or `import` syntax, or the script being loaded too late.","error":"Vue.use() expects a plugin to be a function or an object with an 'install' method."},{"fix":"Add the Semantic UI CSS to your project. This can be done via a CDN link in your `index.html` (`<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css' />`) or by installing `semantic-ui-css` via npm and importing it into your build.","cause":"The Semantic UI CSS stylesheet is missing from the project.","error":"Components render without any styling; appear as basic HTML elements."}],"ecosystem":"npm"}