Skip to content
Semantic-ui2 + vue2
Branch: master
Clone or download
Latest commit 8b19363 Apr 26, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo -> templates Apr 26, 2019
docs package.json correction Jan 26, 2019
src -> templates Apr 26, 2019
.eslintrc.js +lint - shim Nov 15, 2018
.gitignore package.json correction Jan 26, 2019
.npmignore package correction Jan 26, 2019 vue 2.6 Apr 26, 2019
package.json -> templates Apr 26, 2019
semantic.json corrections - alpha Nov 15, 2018
tsconfig.json getting into working - beta Nov 16, 2018
webpack.config.js validation repaired Nov 16, 2018



Integration of semantic-ui2 with vue.js2

To use a version of Vue <2.6.0, use v-semantic version 1

The purpose of the integration is to allow some logic-level approach - ex: the tables are defined by column and not by rows - and to integrate the jQuery for it to be invisible to the programer. jQuery of course still needs to be installed, but there is no need to use it.

The css-classes specific to a component are set as boolean properties of the component. These two codes are equivalent :

<button primary>Click me!</button>
<button class="primary">Click me!</button>

There is a live demo/preview


For usage:

npm install v-semantic --save
import vs from 'v-semantic'
//- or -
import vs from 'v-semantic'
Vue.use(vs, {prefix: 'x'});
//- or -
import {Modal, Command, Button} from 'v-semantic'

	components: {Modal, Button},
	directives: {Command}

Requiring the main library will export each components and directives, and a default that lets you Vue.install(...). The prefix (default "s") option will be used before each name of component for registration ('button' --> <s-button />)

For development

git clone
npm run demo

This will produce demo/run/app.js and therefore, the file demo/run/index.html will be usable directly in the browser. To compile the library only, use npm run prepack

There is no plan to have one-source-file-per-component, it's not a huge library.


These should work and implement their intended final behaviour, even if details can still change

Globals helpers


These have been developped deeper in this library even not completely bound to semantic. It is interwined with semantic though.

Not implemented yet


  • menus
  • radios
  • embed (iframe)
  • sidebar
  • search
  • shape
  • rating
  • reveal?


  • popup
  • visibility
  • messages

No plans to implement

Some of semantic-ui functionalities are just classes to add to some div for which the point of making a custom control out of is discussable.

  • container
  • divider
  • header
  • image
  • list
  • rail
  • segment
  • grid
  • advertisement
  • card
  • transitions (Vue has it)

Things that might perhaps be automated

  • label
  • menu (integration with vue-router)
  • message (toasters? ...?)
  • nag
  • sticky
  • lists
    • labels
    • buttons
    • comments
    • feeds
    • items
    • statistics
    • steps

Support development

If you wanna help, please do.

If you are interested in the development of a component, please leave a comment.

You can’t perform that action at this time.