Using vue.js with semantic UI

Question

I'm trying to use webpack + Semantic UI with Vue.js and I found this library https://vueui.github.io/

But there was problem compling:

ERROR in ./~/vue-ui/components/sidebar/sidebar.jade
Module parse failed: /Project/node_modules/vue-    
ui/components/sidebar/sidebar.jade Unexpected token (1:24)
You may need an appropriate loader to handle this file type.

So I installed jade(pug) but still no luck.

And there's comment in github for that lib:

WIP, do not use ( https://github.com/vueui/vue-ui )

I've managed to import semantic css in my templates like this:

@import './assets/libs/semantic/dist/semantic.min.css';

But problem here is that I can't use semantic.js functions like dimmer and other stuff.

The thing is that I already have some old codebase written with semantic and it would be good not to use any other css framework (bootstrap or materialize).

Is there any elegant way to include semantic UI in my vue.js project?

Otherdirected

Answer 1

1) Install jQuery if it's not installed (properly!):

• npm install --save jquery

• then in your webpack.config file (I just added it in webpack.dev.config.js, but maybe add it in the prod config file):

  in the plugins add a new webpack.ProvidePlugin

  new webpack.ProvidePlugin({
      // jquery
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
  })
  

  Now jQuery is available for ALL the application and components.

The good thing is this is now the same process for ALL your external libraries you want to use (Numeral, Moment, etc..), and of course semantic-ui!

Let's go :

• npm install --save semantic-ui-css

nb : you can use the main repo (i.e. semantic-ui) but semantic-ui-css is the basis theme for semantic-ui.

So, now, you have to, firstly, define Aliases in the webpack.base.config.js file :

under resolve.alias add the alias for semantic:

resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      // adding our externals libs
      'semantic': path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js')
    }
  }

nb : you can put there your other external libs aliases :

// adding our externals libs
      'moment': path.resolve(__dirname, '../node_modules/moment/min/moment-with-locales.js'),
      'numeral': path.resolve(__dirname, '../node_modules/numeral/min/numeral.min.js'),
      'gridster': path.resolve(__dirname, '../node_modules/gridster/dist/jquery.gridster.min.js'),
      'semantic': path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js'),
      'stapes': path.resolve(__dirname, '../node_modules/stapes/stapes.min.js')

nb : use your own path there (normally they should look like those ones !)

...we are about to finish...

Next step is to add alias reference to the plugin provider, like we just do for jQuery =)

new webpack.ProvidePlugin({
      // jquery
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      // semantic-ui | TODO : is usefull since we import it
      semantic: 'semantic-ui-css',
      Semantic: 'semantic-ui-css',
      'semantic-ui': 'semantic-ui-css'
})

nb : here I use several names, maybe semantic is only sufficient ;-)

Again, you can add your lib/alias there :

new webpack.ProvidePlugin({
      // jquery
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      // gridster
      gridster: 'gridster',
      Gridster: 'gridster',
      // highcharts
      highcharts: 'highcharts',
      Highcharts: 'highcharts',
      // semantic-ui | TODO : is usefull since we import it
      semantic: 'semantic-ui-css',
      Semantic: 'semantic-ui-css',
      'semantic-ui': 'semantic-ui-css',
      // Moment
      moment: 'moment',
      Moment: 'moment',
      // Numeral
      numeral: 'numeral',
      Numeral: 'numeral',
      // lodash
      '_': 'lodash',
      'lodash': 'lodash',
      'Lodash': 'lodash',
      // stapes
      stapes: 'stapes',
      Stapes: 'stapes'
    })

Here are all the external libs I'm using in my own project (you can see gridster, which is a jQuery plugin - like semantic-ui is !)

So now, just one last thing to do :

• add semantic css :

  I do this by adding this line at the beginning of the main.js file :

  import '../node_modules/semantic-ui-css/semantic.min.css'

Then, after this line add :

import semantic from 'semantic'

Now you can use it.

Example in my Vuejs file:

<div class="dimension-list-item">
  <div class="ui toggle checkbox"
    :class="{ disabled : item.disabled }">
      <input type="checkbox"
        v-model="item.selected"
        :id="item.id"
        :disabled="item.disabled">
      <label :class="{disabled : item.disabled}" :for="item.id">{{item.label}} / {{item.selected}}</label>
  </div>
</div>

This snippet create a simple cell for a list with a checkbox.

And in script :

export default {
  props: ['item'],
  ready() {    
    $(this.$el.childNodes[1]).checkbox()
  }
}

Here the result :

sample1

sample2

Normally, all should works fine.

I have just started to develop with Vuejs last week, so, maybe there is a better way to to that ;-)

Magistracy

Shouldn't the ProvidePlugin and the alias for semantic-ui have the same name? Anyhow, semantic-ui is being imported as an empty Object here. It did not work. – Reheat

Well, semantic-ui js file came back as a empty Object here. Suggestions? – Reheat

You still need to setup further to make semantic-ui fonts work. – Reheat

For [email protected], you will have to use mounted() instead of ready() – Gatepost

I have a naive question here: what you are doing in your example is "mounting" the DOM element and then attaching semantic-ui JS logic to it. Is this not a total anti-pattern when dealing with virtual DOM based libs like React and Vue? Never manipulate the DOM cause it gets out of sync with the virtual DOM? – Mei

Answer 2

A bit late, but now you can use this: https://github.com/Semantic-UI-Vue/Semantic-UI-Vue. Still WIP but it has all the basic functionalities.

Pretty easy to use:

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

/* ... */

Vue.use(SuiVue);

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  template: '<sui-button primary>{{message}}</sui-button>'
});

The APIs are very similar to the React version: if you used it, this will be very familiar.

Here is a JSFiddle if you want to play around: https://jsfiddle.net/pvjvekce/

Disclaimer: I am the creator

Bortman

I have looked at this and it yes it does have all the basic functionality, but it really is just the basic functionality, so much so that it seems to me to be hardly worth the effort. – Hockett

Answer 3

This is the way that I do it: (note: I use vue-cli to create my projects)

• cd to your vue project directory and do the following:

1- install gulp:

npm install -g gulp

2- Run the following commands and follow the instructions of the installation.

npm install semantic-ui --save
cd semantic/
gulp build

3- After executing the previous commands you should have a "dist" folder inside your "semantic" folder. Move this folder to the "/static" folder located at the root of the project.

4- Include the following lines in your html template file:

<link rel="stylesheet" type="text/css" href="/static/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="/static/dist/semantic.js"></script>

Examen

Answer 4

1. Install jquery npm install jquery
2. Install semantic-ui-css npm install semantic-ui-css
3. Add this in main.js

window.$ = window.jQuery = require('jquery') require('semantic-ui-css/semantic.css') require('semantic-ui-css/semantic.js')

Pannell

the exception disappeared, but I found all the semantic-ui's js doesn't work, for example, there's a menu in my page, I can see the css effect, but when I try to click some items, nothing happened – Ferment

Answer 5

If it happens everything else is working but your buttons make sure to add this .ui form to your form.

Terchie