Nuxt 3 imports issues (vuetify components and icons)

[RiesvGeffen]

At first I didn't have components defined in my createVuetifyApp, this gave me the following errors: Failed to resolve component: VToolbar, for a total of 6 components, when trying to use $notifier.component().

I fixed this with import * as components from 'vuetify/components' and (in my Vuetify plugin):

const vuetify = createVuetify({
  components,
  ...
})

Now I see the component dialog, but in my console I get the following error:

Error: <path> attribute d: Expected number, "mdi-close".

Usually I import the icon explicitly and do <v-icon :icon="mdiClose" />.

Any suggestions as to how I can fix this icon problem? And is there any chance I can still leave out the import of all components?

---

Update: As of now I use the following in my nuxt.config.ts:

notifier: {
  componentOptions: {
    existsButton: false,
  },
},

Two comments:

1. I would still like to use the close button without any problems.
2. Is config name existsButton a typo? In another thread I read English isn't your best/first language, I think you mean exitButton.

[kieuminhcanh]

Thanks for your response. I'm checking it.

[kieuminhcanh]

@RiesvGeffen

To optimize the size of the lib. I components need to import from main app. You can define closeIcon now in options.

/**
 * You can do manually import the components you are using.
 * https://vuetifyjs.com/en/features/treeshaking/#manual-imports
 */

const vuetify = createVuetify({
  components: {
    VDefaultsProvider,
    VDialog,
    VCard,content.
    VToolbar,
    VBtn,
    VIcon,
  },
  ...
})

app.use(VuetifyNotifier, {
  default: {
    ...
    closeIcon: 'mdi-close', //default close icon for component
    ...
  },
})