SolvedSemantic UI How to add Semantic-ui to Webpack with vue-cli

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!

14 Answers

✔️Accepted Answer

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


In my main.js file.

Other Answers:

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

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


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

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

in App.vue

  const inBrowser = typeof window !== 'undefined'
  if (inBrowser) {
    var semantic = require('../semantic/dist/semantic.js')
  @import '../semantic/dist/semantic.css';

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

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

Related Issues:

Semantic UI How to add Semantic-ui to Webpack with vue-cli
For me I use semantic-ui-css package and add: In my main.js file. yesterday im have a problem with s...
Semantic UI [build] gulp build command not working
Hi gulp build can't complete the 'build-assets' phase due to the following error: And is NOT fixed b...
Semantic UI Active owner badly needed
@jlukic The project needs lifesaving measures as it's community is dissatisfied enough to be discuss...
Semantic UI [Modal] Scrolling broken for mobile devices from recent 2.3.2 changes
To make it to work again in my Angular app (with Semantic-UI 2.4.2) I had to add the following code:...
Semantic UI SCROLLING not working with modal
Have a look here: Open this link below in Chrome:
tailwindcss npx tailwindcss init not working
I had trouble generating the configuration file while using the compatibility package I updated my t...
bootstrap Navbar .sticky-top doesn't work
My setup: Bootstrap@4.0.0-beta.2 macOS Sierra - Version 10.12.6 Google Chrome - Version 62.0.3202.62...
tailwindcss outline-none doesn't work on button with focus in chrome
You only need focus:outline-none for all browsers: Hi First of all a big thank's for your work on Ta...
bootstrap Responsive Card Decks
I've managed to find a way of having cards in the responsive system while having equal heights just ...
tailwindcss [Feature Request/Discussion] @apply with media queries and pseudo selectors
Hey @MattRogowski! That's actually totally possible already @apply currently does not work with pseu...
bootstrap Bootstrap dropdown require Popper.js (
For laravel projects using laravel mix window.Popper = require('popper.js').default; does the trick ...
bootstrap table-responsive class does not take full width
simple solution use a wrapping <div> with the table-responsive class. This was previously reported i...
tailwindcss Allow configuration for using px instead of rem
I had this problem as well so I did the conversion for font size spacing and line height (assuming b...
bootstrap v4.0.0-alpha.6 - Activating tooltips breaks modals (stuck "transitioning")
Had the same issue fixed by adding data-animation=false to my html elements. Operating systems and b...
tailwindcss TypeError: getProcessedPlugins is not a function
Check your nodejs version (node -v) I had v10.19.0 then made global update to v14.15.1 ...
bulma [Feature] SASS division without slash
I've just created a fix/divide branch Will merge and release today. This is about Bulma ...
tailwindcss New purge option not working with webpack
The issue is that webpack doesn't set process.env.NODE_ENV for some stupid reason:
tailwindcss TypeError: Invalid PostCSS Plugin found at: plugins[1]
@michalhudecek try with: npm uninstall tailwindcss postcss autoprefixer npm install tailwindcss@comp...
materialize Changes for v1.0.0
There are some more issues I would consider to be included in v1.0.0 I think we should consider to r...
bootstrap Uncaught ReferenceError: Popper is not defined
It's because you included both bootstrap.min.js and bootstrap.bundle.min.js you should just include ...
tailwindcss Import does not work like documented
Some people reading this far might find this summary useful I'm trying to include a component In the...
bootstrap Modal background scrollable (iOS Safari)
Add to html: overflow: scroll; -webkit-overflow-scrolling: touch; System iOS 10.2 (iPad Mini 3) Brow...
bulma Importing Bulma in Create React App
For posterity's sake When importing Bulma in Create React App if you do this: You'll receive this er...
bootstrap [v4] Modal flickering when within .list-group-item
Quick fix for now: .list-group-item .list-group-item:hover{ z-index: auto; } Hi In some cases the mo...
bootstrap Util is not defined when referencing individual jQuery plugins (modal.js) via webpack
I find that code in 'bootstrap/js/src/util.js' was written in ES6 style: So instead of importing fil...
bootstrap v4 Custom File Input Dynamic "Choose file..." ::after pseudo selector
Got bitten by this today It's very strange to me to support styling something into being dysfunction...
materialize Can't select options or scroll in select input on mobile
I found the solution! With the meta viewport like this work fine for me <meta name=viewport content=...
materialize [1.0.0.alpha1] Side nav doesn't work with turbolinks 5
seem like instance still alive when turbolinks:load page it works if we destroy the existing instanc...
tailwindcss @apply doesn't work inside <style jsx></style>
@loicnestler @alexvilchis This works perfectly fine in latest next.js and tailwindcss packages: BTW ...
materialize different colors for different toasts
In Updated Version It's something like: I would like to show the toast like Saved Successfully Pleas...
materialize Can't check RadioButtons or Checkbox inside input-fields div
The best solution is to not wrap the checkboxes in the .input-field class Another solution is to add...
tailwindcss Poor performance as part of a webpack PostCSS build system
I did a little more research on this tonight and removing Tailwind CSS entirely from the project res...
tailwindcss Tailwind 2.0 poor performance as part of a webpack PostCSS build system
@gremo Look at the difference in the size of the bundles there.. 8.8mb for webpack 4/Tailwind 1.x ...
tailwindcss Flex-box "order" with responsive helpers
Thanks I would recommend wrapping it in @responsive like this so you can use it for various breakpoi...
bootstrap Add support for horizontal card
Bump! This would be awesome! 💯 I think it's very common use case that you want to have card content...
bootstrap V4.beta Argument $color of darken($color, $amount) must be a color
@derkjn you need to import the functions scss before variables I have update bootstrap to 4.0.0-beta...
tailwindcss resolve-url-loader cannot operate: CSS error when using @apply
Hey @thestepafter! This is unfortunately a known issue with resolve-url-loader due to one of its dep...
Fomantic UI Fomantic and yarn - install issues
@mathieutu I just did some more research into this and figured out a way around the issue ...
bootstrap _custom.scss alternatives
@supergithubo Marking a variable with !default will make the previous variable assignment important ...
materialize Error with Meteor 1.6-rc7 and node-sass 4.5.2
Not resolved for me I also did a fresh install of Meteor and meteor add materialize:material...
materialize Swipeable tabs carousel height limited to 400px
The problem is that the swipeable tabs are styled by the carousel css Reference #4148 ...
bulma .table-container not working on desktop
Thanks @james-wasson It is the same as mentioned above Here you go:
tailwindcss Latest version breaks application v2.2.12
Same issue here set the link to and it wo...
tailwindcss How to webpack on VueJS project?
Hey I don't know a ton about this but I did manage to get an example project working ...
bootstrap carousel is sliding on ios when clicking whitout controls
what @happy-dev means is that on iOS when you just tap on the carousel it also slides which i can co...
materialize Cannot update to 0.100.1
It makes no sense if everyone writes: I have the same problem Just upvote the actual issue :) We are...
mui Proposal: Minimizing use of global CSS rules
Hi @amorey IMO having a MUI version without global style rules makes MUI more flexible and may incre...
tailwindcss [2.1] JIT mode break style with Next.js and webpack 5
Ugh I feel so dumb My issue was caused when migrating from @tailwindcss/jit What version of Tailwind...
tailwindcss Setting default max-width and height for img tag
Even if the height: auto is not the main problem here i would remove it by default because there is ...
ng bootstrap No provider for NgbActiveModal! => "Components as content"
try to provide NgbActiveModal on app.module Bug description: When trying to implement the Modal usin...