Registry / web-framework / semantic-ui-vue

semantic-ui-vue

library0.11.0jsnpmunverified

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.

web-framework

npm install semantic-ui-vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · SEMANTIC-UI-VUE

semantic-ui-vue

web-frameworkjavascriptv0.11.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SuiVue

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

✗ 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.

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> ` });

Debug

Known issues

breakingThe `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.

affects: >=0.11.0

gotchaSemantic 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.

affects: *

breakingThis 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.

affects: >=0.1.0

Errors

Common errors & fixes

Unknown custom element: `<sui-button>` - did you register the component correctly?

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.

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.

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.

Upgrade

Version history

0.11.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency for the Vue.js framework integration. Primarily compatible with Vue 2.

semantic-ui-cssrequiredProvides the necessary styling for Semantic UI components. Required for components to render correctly.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/Semantic-UI-Vue/Semantic-UI-Vue ↗

packagehttps://www.npmjs.com/package/semantic-ui-vue ↗

homepagehttps://semantic-ui-vue.github.io ↗