Components and mixins to use with Vue 2
$ 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">
Import the global mixin to use all the components. See example below.
Import individual components.
Grid
– componentRow
– componentColumn
– componentCheckbox
– componentDropdown
– componentInput
– componentLabel
– componentForm
– componentField
– componentimport {ComponentName} from 'semantic-ui-vue2'
export default {
components: {
'component-name': ComponentName,
…
},
…
}
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]
…
}
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>