2 replies

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"

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?

�PD

🧩 Plasmo Developers•3y ago•

2 replies

Lulu

CSUI with Vue3's CompositionAPI

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

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?

CSUI with Vue3's CompositionAPI

Similar Threads

CSUI with Vue3's CompositionAPI

Similar Threads

Similar Threads

Similar Threads