[Vuejs]-Vue.JS & Semanti-UI modal

by

-2👍

Solution found. For those who have this issue, here is what to do:

1) Add jQuery as a plugin in your webpack config file:

plugins: [
    ...
    // JQUERY plugin
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    ...
]

2) Add semantic ui css/js at the top of your main.js (the file in which you init your Vue app):

import '../static/semantic/dist/semantic.css'
import '../static/semantic/dist/semantic.js'
import Vue from 'vue'
import App from './App'
...

3) call the modal as you normally would in jquery: $(‘.ui.modal’).modal()

I hope this helps.

Leave a comment