Bug: Dashboard Error with Nuxt-svgo module and vite-svg-loader

[SuddenDev]

Hey @murisceman,

I found a new bug regarding svg integration.
When using either https://nuxt.com/modules/nuxt-svgo or the package vite-svg-loader (which the nuxt module is based upon), the pruvious dashboard throws an error.

I know that there's the PruviousIcon and how to integrate that, but sometimes it makes sense to hardcode some SVGs and therefor I thought I should bring it up. Hopefully there's an easy fix.

I used pruvious and vite-svg-loader together in a differen project. Here are the versions.

    "pruvious": "^3.11.7",
    "vite-svg-loader": "^5.1.0"

Nuxt svgo: https://nuxt.com/modules/nuxt-svgo
Vite-SVG-loader: https://github.com/jpkleemans/vite-svg-loader

Thank you in advance!

[murisceman]

Hey @SuddenDev!

I just tried the nuxt-svgo module, and it only works if I set the defaultImport to something like 'component'. I'm not sure what causes the error, but I will investigate it when I have time.

[Jchegenye]

I am also getting an error, i only have this two modules in Nuxt 3 modules: ['pruvious', 'nuxt-svgo'],

Is there any quick solution for now?

[SuddenDev]

Hey @Jchegenye!
Depending on how many svgs you have, I just created vue components manually out of those. Otherwise I was also unable to find a workaround.

[Jchegenye]

So, apparently if you comment out this two lines import faviconSvg from '../../assets/favicon.svg' and { rel: 'icon', type: 'image/svg+xml', href: faviconSvg }, which is not a good practice, then re-build it again, it works. 🤔

Path: /pruvious-cms/node_modules/pruvious/dist/runtime/components/dashboard/Head.vue

[murisceman]

Hey, @Jchegenye! It's great that you've found a fix for using nuxt-svgo. You can replace Head.vue more elegantly by specifying a path to a custom Head component in your nuxt.config.ts file. The relevant option is pruvious.dashboard.baseComponents.head:

pruvious/src/runtime/module-types.ts

Lines 249 to 254 in 88271c0

	/**
	* Defines the base title and favicon for the dashboard.
	*
	* @example './components/Dashboard/Head.vue'
	*/
	'head'?: string

[Jchegenye]

@murisceman thanks for clarifying, it worked. 👍