Using vue.js with semantic UI

I've the same issue few days ago, and fortunately i've did it.

Step to follow :

1) firstly, You need jQuery, if 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 aplication and components.

And the good thing is, now, this is the same process for ALL your external librairies you want to us (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 smentic-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 is all the external libs i am 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 begining 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 vue 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

Normaly, all should works fine.

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

Hope this help.

Cheer,

Yome.