fix: tree shaking not working (#73)

docs/guide/icons/unocss-preset-icons.md

@@ -28,13 +28,31 @@ You can also use any icon directly in your html markup:
 
 This module provides a new icon set for Vuetify, `unocss-mdi` icon set. The `unocss-mdi` icon set will use the [@iconify-json/mdi](https://icon-sets.iconify.design/mdi/) collection.
 
-You can configure it using the default set:
+In order to use the `unocss-mdi` icon set, you will need to:
+- install the `@iconify-json/mdi` package as dev dependency
+- install the `@unocss/nuxt` package as dev dependency and enable UnoCSS Preset Icons: [UnoCSS Nuxt Integration](https://unocss.dev/integrations/nuxt)
+
+To configure UnoCSS, add `unocss.config.ts` file to your project root folder and register the icons preset:
+```ts
+// unocss.config.ts
+import { defineConfig, presetIcons } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetIcons({
+      scale: 1.2, // scale the icons
+    }),
+  ]
+})
+```
+
+In your Nuxt configuration file, add the UnoCSS Nuxt module and configure the `unocss-mdi` icon set:
 ```ts
 // Nuxt config file
 import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
+  modules: ['@unocss/nuxt', 'vuetify-nuxt-module'],
   vuetify: {
     vuetifyOptions: {
       icons: {
@@ -51,7 +69,7 @@ If you're not using the default UnoCSS Preset Icons [prefix](https://unocss.dev/
 import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
+  modules: ['@unocss/nuxt', 'vuetify-nuxt-module'],
   vuetify: {
     vuetifyOptions: {
       icons: {
@@ -65,7 +83,7 @@ export default defineNuxtConfig({
 
 ## Adding a new Vuetify icon set
 
-This module provides the `mdi` icons via `unocss-mdi` icon set. `unocss-mdi` icon set will use the [@iconify-json/mdi](https://icon-sets.iconify.design/mdi/) collection, but you can use another icon set by installing the corresponding `@iconify-json/*` package and configuring Vuetify to use it:
+This module provides the `mdi` icons via `unocss-mdi` icon set. `unocss-mdi` icon set will use the [@iconify-json/mdi](https://icon-sets.iconify.design/mdi/) collection, but you can use another icon set by installing the corresponding `@iconify-json/*` packages and configuring Vuetify to use it:
 - configure the default set to use `custom`: `vuetify.vuetifyOptions.icons.defaultSet = 'custom'` in your nuxt config file
 - create a new Nuxt Plugin to configure the new icon set
 - add `@unocss-include` comment to the plugin file: this comment will be used by UnoCSS to include the icons

docs/guide/index.md

@@ -327,7 +327,7 @@ This module configures and registers Vuetify using Nuxt plugins via `vuetify:con
 
 `vuetify:configuration` hook is for internal use and not meant to be used by third-party plugins or directly from your application.
 This module will expose only the necessary Nuxt plugins to configure Vuetify using the options you've configured in your application:
-- [icons](/guide/icons/): this Nuxt plugin is always registered, you can write your own Nuxt plugin via `vuetifyOptions.icons.defaultSet = 'custom'` Nuxt configuration option, you have an example using UnoCSS in [Adding a new Vuetify icon set](/guide/icons/unocss-preset-icons).
+- [icons](/guide/icons/): this Nuxt plugin is always registered, you can write your own Nuxt plugin via `vuetifyOptions.icons.defaultSet = 'custom'` Nuxt configuration option, you have an example using UnoCSS in [Adding a new Vuetify icon set](/guide/icons/unocss-preset-icons#adding-a-new-vuetify-icon-set), replace the icons with your custom ones.
 - [i18n](/guide/i18n): this Nuxt plugin will be only registered when `@nuxtjs/i18n` module is configured.
 - [date](/guide/date): this Nuxt plugin will be only registered when `vuetifyOptions.date` Nuxt configuration option is configured.
 

src/utils/configure-nuxt.ts

@@ -29,7 +29,7 @@ export function configureNuxt(configKey: string, nuxt: Nuxt, ctx: VuetifyNuxtCon
     references.push({ types: 'vuetify-nuxt-module/configuration' })
   })
 
-  nuxt.hook('components:extend', async (c) => {
+  /* nuxt.hook('components:extend', async (c) => {
     const components = await ctx.componentsPromise
     Object.keys(components).forEach((component) => {
       c.push({
@@ -45,7 +45,7 @@ export function configureNuxt(configKey: string, nuxt: Nuxt, ctx: VuetifyNuxtCon
         mode: 'all',
       })
     })
-  })
+  }) */
 
   if (importComposables) {
     const composables = ['useLocale', 'useDefaults', 'useDisplay', 'useLayout', 'useRtl', 'useTheme']

src/utils/configure-vite.ts

@@ -1,5 +1,6 @@
 import type { Nuxt } from '@nuxt/schema'
 import defu from 'defu'
+import vuetify from 'vite-plugin-vuetify'
 import { vuetifyStylesPlugin } from '../vite/vuetify-styles-plugin'
 import { vuetifyConfigurationPlugin } from '../vite/vuetify-configuration-plugin'
 import { vuetifyIconsPlugin } from '../vite/vuetify-icons-configuration-plugin'
@@ -21,6 +22,7 @@ export function configureVite(configKey: string, nuxt: Nuxt, ctx: VuetifyNuxtCon
       configKey,
     ]
 
+    viteInlineConfig.plugins.push(vuetify({ styles: true, autoImport: true }))
     viteInlineConfig.plugins.push(vuetifyStylesPlugin({ styles: ctx.moduleOptions.styles }, ctx.logger))
     viteInlineConfig.plugins.push(vuetifyConfigurationPlugin(ctx))
     viteInlineConfig.plugins.push(vuetifyIconsPlugin(ctx))