vue3-sfc-loader don't support <template #title>,but vue2-sfc-loader is ok.

skynice commented 3 years ago

Describe the bug I use vue3-sfc-loader and ElementPlus framework，use

<el-submenu index="2">
  <template #title>我的工作台</template>
  <el-menu-item index="2-1">选项1</el-menu-item>
</el-submenu>

,report warn, but i try vue2-sfc-loader and ElementUI ，it's ok.

Versions

Browser (name & version):chrome 90
vue3-sfc-loader: 0.8
vue2-sfc-loader:0.8

FranckFreiburger commented 2 years ago

The following example seems to work :

<!DOCTYPE html>
<html>
<body>
    <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.js"></script>
    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
  <script>

    const options = {
      moduleCache: { vue: Vue },
      getFile: () => /* <!-- */`

<template>
  <el-menu
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-submenu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-submenu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-submenu>
    </el-submenu>
  </el-menu>
</template>

<script>
  export default {
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

`, /* --> */
      addStyle: () => {},
    }

    const app = Vue.createApp(Vue.defineAsyncComponent(() => window['vue3-sfc-loader'].loadModule('file.vue', options)));
    app.use(ElementPlus);
    app.mount(document.body);
  </script>
</body>
</html>

(https://jsbin.com/tafosihuji/1/edit?html,output)

FranckFreiburger commented 2 years ago

I'm closing this as answered. Discussion can continue if needed.

FranckFreiburger / vue3-sfc-loader

vue3-sfc-loader don't support <template #title>,but vue2-sfc-loader is ok. #78