Vue-UI documentation

Getting started

Vue-UI uses a custom build of Semantic-UI#1.0, so you will need to include the following files found in the dist folder:

Vue-UI dist
themes	All the static assets like fonts, etc
semantic.css	The core CSS components of Semantic-UI
semantic-modules.css	The CSS of the modules wrapped in Vue-UI
semantic-modules.js	The Semantic-UI Javascript for the modules wrapped in Vue-UI

Semantic-UI depends on jQuery, so you will need to add it:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>

Next you need to install the vue-ui NPM package:

npm install --save vue-ui

You can now consume it as a Vue.js plugin in your project:

var Vue = require('vue')
var vueUI = require('vue-ui')

Vue.use(vueUI)

Once you've done that, you can use any of the components:

var Progress = Vue.component('ui-progress')
var transcoding = new Progress().$mount('#transcoding')

transcoding.$increment(20) // Increment the progress by 20%

Of course the components(ex. ui-progress) can also be used with the Web Component syntax:

<div id="app">
    <ui-progress v-ref="progress"></ui-progress>
</div>

var app = new Vue({ el: '#app' })

app.$.progress.$increment(20)