Semantic Vue: Vue integration for Semantic UI

Semantic-UI-Vue

Semantic UI Vue is the Vue integration for Semantic UI. It is highly inspired on Semantic UI React and pretty similar to the original Semantic UI with many of its components but modified for Vue.js projects. If you have used it already, you will find Semantic UI Vue's API to be almost the same. Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

As of today, v0.0.23 is out but it still a WIP. Here is a JSFiddle for a quick look:

Semantic UI Vue quick example

Semantic UI Vue is still under heavy development.The documentation does not contain all the elements and examples of the original Semantic UI but it is updated regularly.

Features

  • Theme examples
  • Friendly API
  • Elements (buttons, flags, etc.)
  • Collections (forms, grids, etc.)
  • Views (statistics)
  • Modules (modals, sidebars)

Example

The Semantic UI Vue package can be installed via NPM:

$ npm install semantic-ui-vue --save

Installing Semantic UI Vue provides the JavaScript for your components. You'll also need to include a stylesheet to provide the styling for your components.

Once Semantic UI Vue has been installed, you will need to import it in your main file (usually index.js or main.js) and tell Vue to use it:

import Vue form 'vue'
import SuiVue from 'semantic-ui-vue'

/* ... */

Vue.use(SuiVue)

CSS

  • Content Delivery Network (CDN)

You can use the default Semantic UI stylesheet by including a Semantic UI CDN link in your index.html file. This is the quickest way to get started with Semantic UI Vue. You won't be able to use custom themes with this method.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
  • Semantic UI package

Install the full Semantic UI package. Semantic UI includes Gulp build tools so your project can preserve its own theme changes, allowing you to customise the style variables.

Detailed documentation on theming in Semantic UI is provided here.

$ npm install semantic-ui --save-dev

After building the project with Gulp, you'll need to include the minified CSS file in your index.js file:

import '../semantic/dist/semantic.min.css';

Take a look at the Semantic-Vue Documentation to see what's included.

After completing setup you can start using Semantic-UI-Vue. Below is a basic layout example with a form:

semanticForm.vue

<template lang="html">
  <div is="sui-container">
    <sui-menu :widths="3">
    <sui-menu-item>Editorials</sui-menu-item>
    <sui-menu-item>Reviews</sui-menu-item>
    <sui-menu-item active>Upcoming Events</sui-menu-item>
  </sui-menu>
  <sui-grid celled>
    <sui-grid-row>
      <sui-grid-column :width="3">
        <sui-segment>
            <h5>Information</h5>
          </sui-segment>
      </sui-grid-column>
      <sui-grid-column :width="13">
        <sui-form>
    <sui-form-field>
      <label>First Name</label>
      <input placeholder="First Name" />
    </sui-form-field>
    <sui-form-field>
      <label>Last Name</label>
      <input placeholder="Last Name" />
    </sui-form-field>
    <sui-form-field>
      <sui-checkbox label="I agree to the Terms and Conditions" />
    </sui-form-field>
    <sui-button type="submit">Submit</sui-button>
  </sui-form>
      </sui-grid-column>
    </sui-grid-row>
    <sui-grid-row>
      <sui-grid-column :width="3">
        <sui-segment>
            <h5>Image</h5>
          </sui-segment>
      </sui-grid-column>
      <sui-grid-column :width="10">
        <sui-image src="http://lorempixel.com/400/200/" size="small" />
      </sui-grid-column>
      <sui-grid-column :width="3">
        <div>
    <sui-button primary compact>Accept</sui-button>
    <sui-button secondary compact>Decline</sui-button>
  </div>
      </sui-grid-column>
    </sui-grid-row>
  </sui-grid>
  </div>
</template>

<script>
export default {
  name: 'VerticallyDividedExample'
}
</script>

Result:

Community

If you want to contribute, have questions or bugs to report join Gitter chat or submit an issue (it doesn't have to be a bug). Read the CONTRIBUTING.md for more details.

The repository of Semantic-UI-Vue is located on GitHub under an MIT license. By @mario_lamacchia.