almino / semantic-ui-vue2

Semantic UI Integration for Vue 2

Semantic UI's Components

Components and mixins to use with Vue 2

Installation

$ npm install semantic-ui-vue2

Include Semantic UI's CSS in your HTML. See official docs.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.7/semantic.min.css">

Usage

Imports

Import the global mixin to use all the components. See example below.

Components

Import individual components.

• Grid – component
• Row – component
• Column – component
• Checkbox – component
• Dropdown – component
• Input – component
• Label – component
• Form – component
• Field – component

import {ComponentName} from 'semantic-ui-vue2'

export default {
    components: {
        'component-name': ComponentName,
                …
    },
    …
}

Collections

Mixins to import related components at once

• Grid – ui-grid, ui-row, ui-column
• Form – ui-form, ui-field

import {Collections} from 'semantic-ui-vue2'

export default {
    mixins: [Collections.CollectionName]
    …
}

Example

App.vue:

<template lang="html">
    <ui-grid container>
        <ui-row>
            <ui-column>
                Lorem ipsum dolor sit amet
            </ui-column>
        </ui-row>
    </ui-grid>
</template>

<script>
import {Mixin} from 'semantic-ui-vue2'

export default {
    mixins: [Mixin]
}
</script>

Result:

<div class="ui grid container">
    <div class="row">
        <div class="column">
            Lorem ipsum dolor sit amet
        </div>
    </div>
</div>

semantic-ui-vue2's Issues

Is there a demo suite?

Hi,

This looks nice; good job!

Is there a demo suite to test?

Cheers,
Dave

Checkbox is not unchecked at start

I try to create an unchecked checkbox (slider), but it stays checked.
<ui-checkbox type="slider" label="Test" :checked="false"></ui-checkbox> should be working, right?
Otherwise, I suppose, there is a documentation yet to be made on how to correctly set up the checkbox module.

Thanks!

Build fails during Uglify

ERROR in static/js/vendor.9b4ed550bf9a0ecd5c60.js from UglifyJs
Unexpected token: punc (() [./~/semantic-ui-vue2/src/mixins/commons/input/index.js:33,0][static/js/vendor.9b4ed550bf9a0ecd5c60.js:1379,21]

Is Semantic-ui-vue2 ready for Server side rendering?

Is it possible to use Semantic-ui-vue2 with NUXTJs?

Support for multiple selections in Dropdown

There is currently no support for multiple selections in the Dropdown module.

Dropdown example

Please can you provide an example on how to use dropdown?

I need to fire an event on dropdown selected item.
Also, how can I set the default text, something like: "Choose option"?

Thanks

Feature complete?

Does it handle all semantic-ui components?