VueJS and Semantic UI integration

People who use Bootstrap have appreciated the ability to edit values of style variables. If you change the value of the @color, the color changes over the entire site. I've used Bootstrap many years and I like his flexibility and easiest.

However, if you start using the Semantic UI, everything seems much more complicated. It took me a while to figure out how to connect it correctly. Perhaps someone will find it useful.

Integration

Semantic UI has integration with MeteorJS, EmberJS. ReactJS and Angular are still in development but already works.

We have a project with VueJS, so lets use semantic-ui-less

npm install semantic-ui-less --save-dev

Creating a theme folder

The next step would be to create a folder for our theme. I called it my-styles but you can use whatever name you want

node_modules/
src/
  my-styles/
    site/
  theme.config

theme.config is a copy of file node_modules/semantic-ui-less/theme.config.example.

Important moment, please note it, change variable @siteFolder, as I see your new path depends on node-module folder

@siteFolder  : ../../src/my-styles/site';

site/ has based on node_modules/semantic-ui-less/_site. However I copy files that I really need to change like globals/site.variables and elements/buttons.

Fill structure of site/ is below.

site/
   assets/
   collections/
   elements/
   globals/
   modules/
   views/

Webpack

I recommend to create alias like that

// at the top of the webpack config file
const path = require('path');

module.exports = {
   entry: ...,
   output: {
    ... 
   },
   resolve: {
     alias: {
        '../../theme.config': path.join(__dirname, 'src/theme.config')  
     }
  },
  module: {
    ...
  }
}

where src/theme.config is path to your config file.

I don't want to write how to set webpack config of less files, so please do it yourself.

Bundling Custom Components

Time to create file main.less and add import in your project

// app.js

import './my-styles/main.less'

// my-styles/main.less

@import "~semantic-ui-less/semantic";

// or if you want to use only part of semantic UI styles

@import "./semantic.less";

where semantic.less is a copy of node_modules/semantic-ui-less/semantic.less.

remove unnecessary strings and replace all & { @import "definitions/..." with & { @import "~semantic-ui-less/definitions/..."

That's all, start the application and enjoy the coding.

Links

1. Bootstrap http://getbootstrap.com/
2. Semantic UI https://semantic-ui.com/
3. Vue.js https://vuejs.org/