Semantic UI Vue

0.11.0 · abandoned · verified Sun Apr 19

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.

Common errors

```
Unknown custom element: `<sui-button>` - did you register the component correctly?
```
cause The Semantic UI Vue plugin (`SuiVue`) has not been registered globally with Vue.

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.

TypeError: Cannot read properties of undefined (reading 'install')

```
Vue.use() expects a plugin to be a function or an object with an 'install' method.
```
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.

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`.
```
Components render without any styling; appear as basic HTML elements.
```
cause The Semantic UI CSS stylesheet is missing from the project.

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.

Warnings

breaking 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.
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.
gotcha 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.
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.
breaking 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.
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.

Install

npm install semantic-ui-vue npm
yarn add semantic-ui-vue yarn
pnpm add semantic-ui-vue pnpm

Imports

SuiVue
wrong:
```
import { SuiVue } from 'semantic-ui-vue';
```
correct:
```
import SuiVue from 'semantic-ui-vue';
```
Main plugin import for ES Modules. Typically used with Vue.use(SuiVue) for global component registration.
SuiVue
```
const SuiVue = require('semantic-ui-vue');
```
CommonJS require pattern for Node.js environments or older bundlers.
SuiButton
```
import { SuiButton } from 'semantic-ui-vue';
```
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.

Quickstart

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.

import Vue from 'vue';
import SuiVue from 'semantic-ui-vue';

// Ensure Semantic UI CSS is loaded. For example, by importing 'semantic-ui-css/semantic.min.css'
// 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" />

Vue.use(SuiVue);

new Vue({
  el: '#app',
  data: {
    message: 'Hello from Semantic UI Vue!'
  },
  template: `
    <div class="ui container" style="margin-top: 20px;">
      <sui-header as="h2">
        <sui-icon name="settings" />
        <sui-header-content>
          My Application
          <sui-header-subheader>Manage your preferences</sui-header-subheader>
        </sui-header-content>
      </sui-header>
      <sui-button primary @click="message = 'Button Clicked!'">
        Click Me
      </sui-button>
      <sui-button secondary>
        Secondary
      </sui-button>
      <p style="margin-top: 15px;">{{ message }}</p>
    </div>
  `
});

view raw JSON →