How to include custom themes to a Nuxt project

[elrumo]

Hi all,

I have purchased a license for PrimeVue Designer but I can't figure out how to add the custom theme I created to my Nuxt project, I could also not find any info on the documentation or anywhere online. I've tried importing the css file into nuxt.config.js like I do with my other css files, but still no luck:

Code: Select all

  css: [
      'primeflex/primeflex.css',
      'assets/style.scss',
      'assets/theme.css',
  ],

[tugce.kucukoglu]

Hi,

for Nuxt 2

Code: Select all

modules: ['primevue/nuxt'],
primevue: {
    theme: 'md-light-indigo'
}

for Nuxt 3

Code: Select all

export default defineNuxtConfig({
    css: [
        'primevue/resources/themes/saga-blue/theme.css',
        'primevue/resources/primevue.css'
    ]
})

[elrumo]

Thanks for the reply. I'm using Nuxt 2, but if I understand correctly your answer is showing how to use one of the default themes, which I got working, what I can't figure out is how to add a custom theme that I made using PrimeVue Designer. Would you know how to do that?

Hi,

for Nuxt 2

Code: Select all

modules: ['primevue/nuxt'],
primevue: {
    theme: 'md-light-indigo'
}

for Nuxt 3

Code: Select all

export default defineNuxtConfig({
    css: [
        'primevue/resources/themes/saga-blue/theme.css',
        'primevue/resources/primevue.css'
    ]
})

[TomM]

This doesn't work for me. I am trying to create a sidebar menu. So I copied this code from here and plopped it into my login route just because it was blank and available.
https://www.primefaces.org/primevue/#/sidebar

I copied the whole thing in, saved, and built. When it runs I get the error below.
vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <Sidebar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Which is telling me my nuxt2 is not recognizing PrimeVUE as registered components.

Here are the relevant parts of my nuxt.config.js:

// Auto import components: https://go.nuxtjs.dev/config-components
components: true,

// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
"@nuxt/typescript-build",
],

// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// Doc: https://www.primefaces.org/primevue/showcase-v2/#/setup
"primevue/nuxt",
// https://go.nuxtjs.dev/axios
"@nuxtjs/axios",
],

primevue: {
theme: "tailwind-light",
},

// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
// Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios ... issues/308
baseURL: "/",
},

// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
// https://github.com/primefaces/primevue/issues/844
transpile: ["primevue"],
},

Here are the packages I have installed:
"dependencies": {
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/pwa": "^3.3.5",
"@vue/composition-api": "^1.4.6",
"core-js": "^3.19.3",
"i18n": "^0.14.1",
"nuxt": "^2.15.8",
"primeflex": "^3.1.0",
"primeicons": "^5.0.0",
"primevue": "^2.7.0",
"vue": "^2.6.14",
"vue-i18n": "^8.27.0",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
},
"devDependencies": {
"@nuxt/types": "^2.15.8",
"@nuxt/typescript-build": "^2.1.0",
"eslint": "^8.9.0",
"eslint-plugin-nuxt": "^3.1.0"
}

Any clue on what the problem is? Should I not have installed primeflex and primeicons? or an older version?

[tugce.kucukoglu]

Hi,

You also need to import PrimeVue components like this:

Code: Select all

modules: [
    [
        'primevue/nuxt', {
            theme: string,      //name of the theme, defaults to saga-blue
            ripple: boolean,    //whether the ripple animation is enabled, defaults to false
            components: [],     //an array of components to be registered
            directives: ['Sidebar']      //an array of directives to be registered
        }
    ]
],

[wuckertrhea]

Hi,

for Nuxt 2

Code: Select all

modules: ['primevue/nuxt'],
primevue: {
    theme: 'md-light-indigo'
}

for Nuxt 3 wordle today

Code: Select all

export default defineNuxtConfig({
    css: [
        'primevue/resources/themes/saga-blue/theme.css',
        'primevue/resources/primevue.css'
    ]
})

I appreciate your response. While I was able to get one of the pre-installed themes to function in Nuxt 2, I have been unable to figure out how to install a custom theme that I designed in PrimeVue Designer. Do you think you could figure that out?