🧩 Plasmo Developers•2y ago

Vue Components

I've broken my sidebar out into multiple components: a header, a body, a footer, and an opener. The opener is a tab that shows when the sidebar is closed and allows the user to open it back up. Everything displays properly, but I'm getting a set of errors in console for the sidebar components which I don't feel comfortable ignoring. An image of these errors is provided. These components are all imported into a Sidebar.vue file, which is then imported into a container that is used on whichever site that particular container supports. I'm willing to provide more context on this code if it would prove useful. Any help is appreciated. I would love to see and help Plasmo improve in its support of the Vue framework, both from a documentation and bug squashing standpoint.

14 Replies

lab•2y ago

does all of your sidebar resides inside the contents directory? if so, I'd highly suggest moving them to a /features/content-scripts then have a single content.vue file that does the bulk of the import what you're seeing, I suspect, is bc all of your submod of the CS were inside /contents <- this make them all get transformed into separate content script

LuluOP•2y ago

Yup, they're all under contents/sidebar/files.vue and the container is in /contents/containerfile.vue Gotcha, that makes a lot of sense. I'll give it a try and report back.

lab•2y ago

I would love to see and help Plasmo improve in its support of the Vue framework, both from a documentation and bug squashing standpoint.

Would love to have some more dedicated docs for vue if you're down to contribute :) I use react mainly xD.....

LuluOP•2y ago

Yeah for sure, I'm down to write some docs for Vue

lab•2y ago

Awesome, lmk if you need any guidance on where to put them

LuluOP•2y ago

Any ideas on this bit? In the contents folder this worked just fine. The path is correct, the issue seems to be with data-text Looks like it uses @parcel/transformer-postcss under the hood, but is there anything preventing it from working outside of the contents folder?

Arcane•2y ago

@Lulu has reached level 2. GG!

lab•2y ago

hmmmm that's a TS error - it means you need to add that path to the tsconfig otherwise, it will yell that error yeah - it's an editor error where is this file located btw?

LuluOP•2y ago

LuluOP•2y ago

Heres the file structure I'll see about getting it in the tsconfig

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": [
    "node_modules"
  ],
  "include": [
    ".plasmo/index.d.ts",
    "./**/*.ts",
    "./**/*.vue"
  ],
  "compilerOptions": {
    "paths": {
      "~*": [
        "./src/*"
      ]
    },
    "baseUrl": "."
  }
}

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": [
    "node_modules"
  ],
  "include": [
    ".plasmo/index.d.ts",
    "./**/*.ts",
    "./**/*.vue"
  ],
  "compilerOptions": {
    "paths": {
      "~*": [
        "./src/*"
      ]
    },
    "baseUrl": "."
  }
}

What would need to be added? Everything looks pretty covered Oh, it seemed to magically stop yelling. Yay! The issue was that something else was preventing it from compiling, so it was confused. Looks like moving them out resolved it. Thank you @louis

YAGPDB.xyz•2y ago

Gave +1 Rep to @louis

LuluOP•2y ago

I'll see about getting some Vue docs flowing in

lab•2y ago

yw 👍

Gaming

Programming

Vue Components

Did you find this page helpful?