brrd / electron-tabs

Tab component for Electron
MIT License
697 stars 130 forks source link

How can I use it in vue3? #183

Closed basilbai closed 1 year ago

basilbai commented 1 year ago

I configured the new-tab-button, but it does not appear as expected, and I cannot use custom styles, the code is as follows

<template>
  <tab-group new-tab-button="true" sortable="true">
    <style>
      .my-badge {
        background-color: orange;
      }
      .my-custom-tab {
        color: red;
        font-weight: bold;
      }
    </style>
  </tab-group>
</template>

<script setup>
import "electron-tabs/dist/electron-tabs";
import { onMounted } from "vue";

onMounted(() => {
  const tabGroup = document.querySelector("tab-group");
  tabGroup.addTab({
    title: "Google",
    src: "https://www.google.com/",
    active: true,
    closable: false,
    webviewAttributes: {
      allowpopups: true,
    },
  });
});
</script>

image

brrd commented 1 year ago

Electron-tabs is intended to be used with vanilla JS only. You will have to adapt it by yourself or to find an alternative if you want to work with Vue. I'm sorry.