Use element-ui in electron-vue template have strange problems

Found an issue or bug with electron-vue? Tell me all about it!

My project use element-ui have strange problems when i update laster electron-vue template. I don’t known why in dev mode have not run, but i found web mode can running good.

Describe the issue / bug.

use element-ui component in LandingPage.vue

        <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
          <el-button>you can click this is not work</el-button>
        </el-tooltip>

command: npm run dev result not have show tooltip

command: npm run build:web will good performance

How can I reproduce this problem?

npm install element-ui

in main.js

import Vue from 'vue'
import axios from 'axios'

import App from './App'
import router from './router'
import store from './store'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  template: '<App/>',
  components: { App },
  router,
  store
}).$mount('#app')

in renderer/components/LandingPage.vue

<template>
  <div id="wrapper">
    <img id="logo" src="~@/assets/logo.png" alt="electron-vue">
    <main>
      <div class="left-side">
        <span class="title">
          Welcome to your new project!
        </span>
        <system-information></system-information>
      </div>

      <div class="right-side">
        <div class="doc">
          <div class="title">Getting Started</div>
          <p>
            electron-vue comes packed with detailed documentation that covers everything from
            internal configurations, using the project structure, building your application,
            and so much more.
          </p>
          <button @click="open('https://simulatedgreg.gitbooks.io/electron-vue/content/')">Read the Docs</button><br><br>
        </div>
        <div>
        <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
          <el-button>you can click this is not work</el-button>
        </el-tooltip>
        </div>
        <div class="doc">
          <div class="title alt">Other Documentation</div>
          <button class="alt" @click="open('https://electron.atom.io/docs/')">Electron</button>
          <button class="alt" @click="open('https://vuejs.org/v2/guide/')">Vue.js</button>
        </div>
      </div>
    </main>
  </div>
</template>

Two Result: command: npm run dev command: npm run build:web

you can test it.

Tell me about your development environment.

• Node version: 7.9.0
• NPM version: 5.3.0
• vue-cli version: (if necessary)
• Operating System: darwin

[SimulatedGREG]

@imRainChen

Okay, I am able to reproduce this issue now. It seems element-ui falls into that category of modules that need to be white-listed. If you go into .electron-vue/webpack.renderer.config.js, around line 21, you can add element-ui to the whiteListedModules list. After making that change, tooltips will work as expected.

[todoyel]

@SimulatedGREG I am facing the same problem. The template UI is working on the web perfectly but when I try to integrate with electron it’s breaking the UI. I have added two images.