Nominating Presidential Muppets
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »




    Integration of semantic-ui2 with vue.js2

    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.install(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 />)


    This library integrate a straightforward way bundling with fuse-box. If you make a project with this bundler, it will be straight-forward.

    import vs from 'v-semantic'

    Unfortunately, fuse-box poorly makes universal bundles. To bundle v-semantic, you can simply bundle the sources. The sources entry point is in v-semantic/src/index.ts

    import vs from 'v-semantic/src'

    For development

    git clone
    node fuse

    Beware of yalc : it happens that in order to develop v-semantic, some libraries v-semantic uses need to be PR-ed. Therefore, the new libraries are used as they are modified - localy. If you end up with a yalc reference in your package.json (this occurs only for deployment) ask for the correct version and PR to download to be up-to-date at that moment.

    This will produce dist/v-semantic.js

    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
    • breadcrumbs (integration with vue-router)
    • menu (integration with vue-router)
    • message (toasters? ...?)
    • nag
    • sticky
    • lists
      • labels
      • buttons
      • comments
      • feeds
      • items
      • statistics
      • steps

    Support development

    I contribute for free with drive, passion and time. If you like what I do, you can promote me to do it more.

    These are the only like buttons that have a real effect.

    • ETH: 0xb79b61130bc5726ddab6c1d59c3e0479afe69540
    • BTC: 38HbE73qfLf2qP6Ce1ppYwZf458nugS3KY
    • BCH: 3K81iYWwLZuWXY1qHcBL559FYraUqKMkEp


    If you wanna help, please do.

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


    npm i v-semantic

    Downloadslast 7 days







    last publish


    • avatar