Semantic-ui: How to add Semantic-ui to Webpack with vue-cli

[afrianjunior]

yesterday, im have a problem with semantic ui js to import in webpack with vue-cli.

but now that problem is resolved. im just share how do im solve this problem.

import semantic from 'semantic' // error

i try again.

import semantic from 'semantic-ui' // error again

hmm, webpack does not recognize semantic.

but im try this

import semantic from 'semantic-ui/dist/semantic.js' // yes, it works!

if i'm wrong, please comment. thanks!

[saitonakamura]

which package do you install, npm i semantic-ui?

[afrianjunior]

yups, i'm work with NPM

[saitonakamura]

I suggest that your directory structure looks like this

|-- webpack.config.js
|-- node_modules
|-- semantic-ui
  |-- dist
    |-- semantic.js

How webpack resolves
So you achieve it three in a 3 different ways (oh you, webpack)

• Adding resolve.root option
  This is the recommended way, since your semantic ui dist don't have depth dependency structure

var path = require('path')

resolve: {
  root: [path.resolve('./semantic-ui/dist')]
}

• By extending resolve.moduleDirectories (it defaults to ["web_modules", "node_modules"])
  It suits for package managers with depth dependency structure since it moves to the parent directory until application root like node resolve but not for this case, it's an overkill

resolve: {
  moduleDirectories: ["web_modules", "node_modules", "semantic-ui/dist"]
}

• By adding an relolve.alias to semantic
  But this option clearly lacks flexibility

resolve: {
  alias: {
    semantic: path.resolve('./semantic/dist/semantic.js')
  }
}

[saitonakamura]

I also suggest using semantic-ui-css package if you don't use custom theming or some other features you can hack within gulp build step
It sticks right into node_modules so you can import it without dancing around

[krisanalfa]

For me, I use semantic-ui-css package and add:

require('semantic-ui-css/semantic.css')
require('semantic-ui-css/semantic.js')

In my main.js file.

[janat08]

require('semantic-ui-css/semantic.css')
require('semantic-ui-css/semantic.js')

Will raise error:
Uncaught ReferenceError: jQuery is not defined(…)

While jQuery is deprecated, and even than I think jquery is dependency for ui-css anyway.

[krisanalfa]

Of course before you requiring ui-css, you can:

window.$ = window.jQuery = require('jquery')

require('semantic-ui-css/semantic.css')
require('semantic-ui-css/semantic.js')

[italomaia]

The suggestions by @saitonakamura did not work form me.
The module still could not be found.
@afrianjunior (import semantic from 'semantic-ui/dist/semantic.js') and @krisanalfa suggestions worked like a charm!

[HadrienChapel]

Hello everyone, If you were like me, working with the latest vue-cli project, and use semantic as css framework and got errors when you want to use semantic queries (which use jquery $), i give you answers i got from this topic and others I watched before:

in the App.vue (the main Vue file), import semantic with: import semantic from 'semantic-ui/dist/semantic.js' like wrote before, and for styling, you can import into balise
'@import url("../semantic/dist/semantic.min.css");' and don't forget to include jquery in the index.html

otherwise, @afrianjunior @krisanalfa thanks for your help, i was stuck for some days didn't know why jquery actions wasn't working in my app

[afrianjunior]

if you work with vue ssr, you can use webpack.ProvidePlugin, like this:

plugin: [
  new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
]

in App.vue

<script>
  const inBrowser = typeof window !== 'undefined'
  if (inBrowser) {
    var semantic = require('../semantic/dist/semantic.js')
  }
</script>

<style>
  @import '../semantic/dist/semantic.css';
</style>

do not import jquery in App.vue or main.js

[imaia]

Also generating your semantic ui dist assets inside your src/ folder works quite nicely.

[VSG24]

@krisanalfa Your solution seems elegant however the require syntax only works for js not css for me, am I missing something?

[krisanalfa]

@VSG24 Have you added css-loader yet? If not, try to add it and see if it works.