First of all we need to install Nuxt.js
vue init nuxt-community/starter-template <project-name>
Then we have to follow instructions. Finally we need to install some additional packages:
yarn add --dev less less-loader semantic-ui-less
Let's copy some files
cp node_modules/semantic-ui-less/semantic.less assets/styles -p
cp node_modules/semantic-ui-less/theme.config.example assets/styles/theme.config
Change this:
& { @import "definitions/globals/reset"; }
to
& { @import "~semantic-ui-less/definitions/globals/reset"; }
And do it for all other entries.
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 : '../../assets/styles/site';
/*******************************
Import Theme
*******************************/
@import (multiple) "~semantic-ui-less/theme.less";
@fontPath : "../../../themes/@{theme}/assets/fonts";
Add this entry:
css: [
'~/assets/styles/semantic.less'
],
To make the semantic ui to properly resolve paths add this to the end of extend
function:
config.resolve.alias['../../theme.config$'] = '~/assets/styles/theme.config'
And it works: