Lulu Posts - Answer Overflow

Lulu

Posts Comments

PD🧩 Plasmo Developers

•Created by Lulu on 5/25/2023 in #🔰newbie

Vue Components

31 replies

PD🧩 Plasmo Developers

•Created by Lulu on 5/22/2023 in #🔰newbie

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?

3 replies

Gaming

Programming