UI elements into Vue 2.0 projects by Element.io

Element is a Desktop UI Library. It offers component based custom themes, forms, data tables and such, and more UI elements, each with its own options.

Below is a small example of some UI elements (buttons, navbar), using this library.

Installation

npm i element-ui -S

main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

You can choose to import Element entirely, or just import what you need. For more visit the docs.

App.vue

  <div id="app">
    <el-row>
      <el-col :span="24">
        <el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1">Processing Center</el-menu-item>
          <el-submenu index="2">
            <template slot="title">Workspace</template>
            <el-menu-item index="2-1">item one</el-menu-item>
          </el-submenu>
          <el-menu-item index="3">Orders</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
<el-row>
<el-col :span="12">
  <div class="grid-content">
    <div class="block">
      <span class="wrapper">
        <el-button type="success">Success</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
        <el-button type="info">Info</el-button>
      </span>
    </div>
  </div>
</el-col>
</el-row>
</div>

Visit the UI Library, you can find the repos on GitHub.