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!
Share Improve this question asked Nov 18, 2024 at 11:00 eborakseboraks 3773 silver badges12 bronze badges1 Answer
Reset to default 0It 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
}
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745623182a4636645.html
评论列表（0条）