almino / semantic-ui-vue2

Semantic UI Integration for Vue 2
123 stars 11 forks source link
mixins semantic-ui vue vue2 vuejs vuejs2

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.

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

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

Collections

Mixins to import related components at once

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>