🧩 Plasmo Developers�PD
🧩 Plasmo Developers•3y ago•
2 replies
Lulu

CSUI with Vue3's CompositionAPI

I'm creating an extension that utilizes CSUI to provide a sidebar, overlay style UI instead of the traditional popup style. I'm attempting to utilize Vue3's with CompositionAPI in lieu of React. My code is below:
<template>
<div className="apd-container">
  <span>Testing 1 2 3</span>
</div>
</template>

<script setup lang="ts">
import styleText from "data-text:./style.css"
import type { PlasmoGetStyle } from "plasmo"

export const getStyle: PlasmoGetStyle = () => {
  const style = document.createElement("style")
  style.textContent = styleText
  return style
}

console.log('Hello World, from the sidebar overlay!');
</script>

I'm getting an error on the import type { PlasmoGetStyle } from "plasmo" line which reads:
[@vue/compiler-sfc] <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.

Has anyone created an extension with Vue3's CompositionAPI and can show code examples, or perhaps have an idea about how I can import Plasmo types without Vue throwing a fit?
Was this page helpful?