Semantic ui vue for Vue JS

Semantic UI Vue is Vue integration for Semantic UI.It is inspired by Semantic UI in React. Let’s see how to install it. You can install it using NPM or Yarn.

 $ npm install semantic-ui-vue
# or
$ yarn add semantic-ui-vue

When you install Semantic UI Vue it provides the JavaScript for your components. You will need to include a stylesheet to give styling for your components. After installing Semantic UI Vue you need to import it in the main file which could be index.js or main.js and add the use command for Vue.


import Vue from 'vue';
import SuiVue from 'semantic-ui-vue';
/* ... */
Vue.use(SuiVue);

If you are not using Webpack add the script in your html as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- head -->
</head>
<body>
  <div id="app"></div>
  <script src="node_modules/vue/dist/vue.min.js"></script>
  <script src="node_modules/semantic-ui-vue/dist/umd/semantic-ui-vue.min.js"></script>
  <script>
  Vue.use(SemanticUIVue);
  var app = new Vue({
      el: '#app',
      data: {
          message: 'Hello Vue!'
      },
      template: '<span><sui-button primary>click me</sui-button>{{message}}</span>'
  });
  </script>
</body>
</html>

You can also import it using CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://unpkg.com/semantic-ui-vue/dist/umd/semantic-ui-vue.min.js"></script>

Now for adding CSS use default Semantic UI stylesheet by including a Semantic UI CDN link in your index.html file. 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css">