🧩 Plasmo Developers•2y ago

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>

<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.

[@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?

2 Replies

Arcane•2y ago

@Lulu has reached level 1. GG!

LuluOP•2y ago

Maybe coming at this from a different angle would help: has anyone successfully used CSUI with <script setup> before to avoid have to set up all of the boilerplate?

Gaming

Programming

CSUI with Vue3's CompositionAPI