Semantic UI Vue CLI 3.md

Installation from scratch

Install Vue CLI

npm install -g @vue/cli

Create project

vue create my-project

If you didn't add LESS pre-processor during project creation then run this

npm install -D less-loader less

Configuration

Let's copy some files

mkdir -p assets/styles
cp node_modules/semantic-ui-less/semantic.less assets/styles
cp node_modules/semantic-ui-less/theme.config.example assets/styles/theme.config

assets/styles/semantic.less

Change this:

& { @import "definitions/globals/reset"; }

to

& { @import "~semantic-ui-less/definitions/globals/reset"; }

And do it for all other entries.

assets/styles/theme.config

In the end of the file replace Folders and Import theme sections with this:

/*******************************
            Folders
*******************************/

/* Path to theme packages */
@themesFolder : 'themes';

/* Path to site override folder */
@siteFolder  : '../../src/assets/styles/site';


/*******************************
         Import Theme
*******************************/

@import (multiple) "~semantic-ui-less/theme.less";
@fontPath : "../../../themes/@{theme}/assets/fonts";

vue.config.js

Add this entry:

const path = require('path')

  // Following goes inside module.exports object literal
  configureWebpack: {
    resolve: {
      alias: {
        '../../theme.config$': path.join(__dirname, 'src/assets/styles/theme.config'),
      },
    },
  },

Load styles

In main.js put line:

import './assets/styles/semantic.less';

WebStorm/PHPStorm

There is nice feature helping to resolve paths. As there is @ alias set to resolve src/ folder you can set it in your JetBrains app configuration.

Open Preferences / Languages & Frameworks / Webpack and as webpack configuration file set following:

[GLOBAL PATH TO YOUR PROJECT]/node_modules/@vue/cli-service/webpack.config.js

or simply click out the path with the built in wizard.

From now your IDE should easily resolve paths like this one: '@/components/Navigation'