admin管理员组

文章数量:1434444

I'm developing a Chrome extension using Vite, Vue.js 3, and PrimeVue. I want to use a PrimeVue theme preset in my project, but the theme isn't being applied in the extension popup.

Here is a screenshot of the popup out of the box, as you can see the button doesn't have the theme style.

Here is my main.js file:

import { createApp } from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
import { definePreset } from '@primevue/themes';
import Lara from '@primevue/themes/lara';

const MyPreset = definePreset(Lara, {
    // Your customizations
});

const app = createApp(App);
app.use(PrimeVue, { preset: MyPreset });
app.mount('#app');

Here is my vite.config.js:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].js',
        chunkFileNames: 'assets/[name].js',
        assetFileNames: 'assets/[name].[ext]'
      }
    }
  }
});

And here is my index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <script type="module" crossorigin src="/assets/index.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Despite these configurations, the PrimeVue theme preset is not being applied in the Chrome extension popup. The components render without the expected theme styles.

Here is an example component (HelloWorld.vue):

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href=".html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
</template>

What could be causing the PrimeVue theme preset to not be applied in the Chrome extension popup? How can I ensure that the theme is correctly applied?

Any help or guidance would be greatly appreciated!

I'm developing a Chrome extension using Vite, Vue.js 3, and PrimeVue. I want to use a PrimeVue theme preset in my project, but the theme isn't being applied in the extension popup.

Here is a screenshot of the popup out of the box, as you can see the button doesn't have the theme style.

Here is my main.js file:

import { createApp } from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
import { definePreset } from '@primevue/themes';
import Lara from '@primevue/themes/lara';

const MyPreset = definePreset(Lara, {
    // Your customizations
});

const app = createApp(App);
app.use(PrimeVue, { preset: MyPreset });
app.mount('#app');

Here is my vite.config.js:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].js',
        chunkFileNames: 'assets/[name].js',
        assetFileNames: 'assets/[name].[ext]'
      }
    }
  }
});

And here is my index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <script type="module" crossorigin src="/assets/index.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Despite these configurations, the PrimeVue theme preset is not being applied in the Chrome extension popup. The components render without the expected theme styles.

Here is an example component (HelloWorld.vue):

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs./guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
</template>

What could be causing the PrimeVue theme preset to not be applied in the Chrome extension popup? How can I ensure that the theme is correctly applied?

Any help or guidance would be greatly appreciated!

  • google-chrome-extension
  • vite
  • primevue
Share Improve this question asked Nov 18, 2024 at 11:00 eborakseboraks 3773 silver badges12 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

It looks to me like you fot to set the theme variable in you main.js

Looking at the primeVue documentation primeVue install with Vite

It is shown to set the theme as following

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Lara from '@primevue/themes/lara';

const app = createApp(App);
app.use(PrimeVue, {
    theme: {
        preset: Lara 
    }
});

So try to put the theme variable before the object with the preset in it

It should als be like this when using definePreset

import PrimeVue from 'primevue/config';
import { definePreset } from '@primevue/themes';
import Lara from '@primevue/themes/lara';

const MyPreset = definePreset(Lara , {
    //Your customizations, see the following sections for examples
});

app.use(PrimeVue, {
    theme: {
        preset: MyPreset
    }
 });

本文标签： PrimeVue Theme Preset Not Applied in Chrome Extension Popup Using ViteStack Overflow

版权声明：本文标题：PrimeVue Theme Preset Not Applied in Chrome Extension Popup Using Vite - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745623182a2666810.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。