userquin / vuetify-nuxt-module

Zero-config Nuxt Module for Vuetify

Zero-config Nuxt Module for Vuetify

🚀 Features

• 📖 Documentation & guides
• 👌 Zero-Config: sensible built-in default Vuetify configuration for common use cases
• 🔌 Extensible: expose the ability to customize the Vuetify configuration via Nuxt Runtime Hooks
• ⚡ Fully Tree Shakable: by default, only the needed Vuetify components are imported
• 🛠️ Versatile: custom Vuetify directives and labs components registration
• ✨ Configurable Styles: configure your variables using Vuetify SASS Variables
• 💥 SSR: automatic SSR detection and configuration including HTTP Client hints
• 🔩 Nuxt Layers and Module Hooks: load your Vuetify configuration using Nuxt Layers or using a custom module via vuetify:registerModule Nuxt Module Hook
• 📥 Vuetify Configuration File: configure your Vuetify options using a custom vuetify.config file, no dev server restart needed
• 🔥 Pure CSS Icons: no more font/js icons, use the new unocss-mdi icon set or build your own with UnoCSS Preset Icons
• 😃 Icon Fonts: configure the icon font you want to use, the module will automatically import it for you using CDN or local dependencies
• 🎭 SVG Icons: ready to use @mdi/js and @fortawesome/vue-fontawesome SVG icons packs
• 📦 Multiple Icon Sets: register multiple icon sets
• 🌍 I18n Ready: install @nuxtjs/i18n Nuxt module, and you're ready to use Vuetify internationalization features
• 📆 Date Components: use Vuetify components that require date functionality installing and configuring one of the @date-io adapters
• 💬 Auto-Import Vuetify Locale Messages: add Vuetify Locale Messages adding just the locales you want to use, no more imports needed
• ⚙️ Auto-Import Vuetify Composables: you don't need to import Vuetify composables manually, they are automatically imported for you
• 🎨 Vuetify Blueprints: use Vuetify Blueprints to quickly scaffold components
• 👀 Nuxt DevTools: ready to inspect your Vuetify styles with the Nuxt DevTools inspector
• 🦾 Type Strong: written in TypeScript

📦 Install

Requires Vite, will not work with Webpack

npx nuxi@latest module add vuetify-nuxt-module

🦄 Usage

vuetify-nuxt-module is strongly opinionated and has a built-in default configuration out of the box. You can use it without any configuration, and it will work for most use cases.

Add vuetify-nuxt-module module to nuxt.config.ts and configure it:

// Nuxt config file
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    'vuetify-nuxt-module'
  ],
  vuetify: {
    moduleOptions: {
      /* module specific options */
    },
    vuetifyOptions: {
      /* vuetify options */
    }
  }
})

Read the 📖 documentation for a complete guide on how to configure and use this module.

👀 Full config

Check out the types.

The virtual modules can be found in configuration.d.ts file.

📄 License

MIT License © 2023-PRESENT Joaquín Sánchez

vuetify-nuxt-module's Issues

i18n key not found in locale messages

After following documentation for basic setup of i18n with lazy loading of locales from files, I get this error on the initial render:

[intlify] Not found 'welcome' key in 'en' locale messages.

Reproduction:

https://stackblitz.com/edit/github-6zjd6y?file=app.vue,nuxt.config.ts,package.json,lang%2Fen-US.json,i18n.config.ts

Is this a bug, or am I just doing something wrong? I have checked the playground, and things seem to be working there, but I can't figure out what is different there vs my code.

move docs to ghpages/netlify

We can use VP or Docus

Autocomplete of Vuetify CSS utilities not working in Phpstorm

I'm using:

• PhpStorm v2023.2
• Pnpm v8.6.12
• Dependencies:
  

cannot use aliases

Can`t add Custom Icons into Vuetify config icons.sets

sets: {
  mdi,
  custom
}

sets not iterable durung app building

Can you please provide an example of including custom icons in playground?
Thanks in advance

Defining an alias without a string crashes nuxt start with "Unexpected token '.'"

Reproduce:
Define an alias in following way in vuetify.config.mts:

import { md3 } from 'vuetify/blueprints'
import { defineVuetifyConfiguration } from '../custom-configuration'
import { VBadge } from 'vuetify/components'

export default defineVuetifyConfiguration({
  aliases: {
    // Bug description: Following way of defining an alias causes the problem. Workaround is to use string.
    MyBadge: VBadge,
    MyChip: 'VChip',
  },
})

Run pnpm run dev. Following error happens:

Nuxi 3.6.5                                                                                                                                                  1:14:12 PM
Nuxt 3.6.5 with Nitro 2.5.2                                                                                                                                 1:14:12 PM
                                                                                                                                                            1:14:15 PM
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.1.104:3000/


 ERROR  Cannot start nuxt:  Unexpected token '.'                                                                                                            1:14:16 PM

  at __global_eval__ (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:1:267)
  at _0x540285 (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:42:155537)
  at _0x453fa1._compile (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:42:153889)
  at _0x1f63e2 (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:42:150551)
  at Object.compileFunction (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:431071)
  at wrapSafe (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:258279)
  at Module._compile (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:258643)
  at Module._extensions..js (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:259672)
  at Module.load (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:257701)
  at Module._load (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:255120)
  at Module.require (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:258019)
  at i (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:514802)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:252752)                                                                          1:14:12 PM
  at eval (node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vuetify/lib/components/VApp/VApp.mjs:3:1)
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255181)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253109)
  at eval (node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vuetify/lib/components/VApp/index.mjs:1:250)
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255181)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253109)
  at eval (node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vuetify/lib/components/index.mjs:1:151)
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255181)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253109)
  at eval (playground/vuetify.config.mts:3:19)
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255181)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253109)
  at loadConfigFile (node_modules/.pnpm/[email protected]/node_modules/unconfig/dist/index.cjs:155:11)
  at async Object.load (node_modules/.pnpm/[email protected]/node_modules/unconfig/dist/index.cjs:82:24)
  at async loadVuetifyConfiguration (src/utils/config.ts:78:18)
  at async mergeVuetifyModules (src/utils/layers.ts:37:27)
  at async load (src/utils/loader.ts:21:7)
  at async setup (src/module.ts:58:5)
  at async normalizedModule (node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt/kit/dist/index.mjs:2140:18)
  at async Module.installModule (node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt/kit/dist/index.mjs:2486:95)
  at async initNuxt (node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/nuxt/dist/index.mjs:3255:7)
  at async load (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/chunks/dev.mjs:220:9)
  at async Object.invoke (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/chunks/dev.mjs:264:5)
  at async _main (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/cli.mjs:64:20)

Workaround:
Define the aliases by only using string (like the VChip in the example code).

The example in Vuetify docs defines aliases without strings: https://vuetifyjs.com/en/features/aliasing/

This is a Stackblitz that reproduces the bug: https://stackblitz.com/edit/github-x3p2de?file=playground%2Fvuetify.config.mts

Wrong state on initial page load with SSR enabled

Hi,

When using this module with SSR enabled, the Vuetify components are rendered in the wrong state on the initial page load. When disabling SSR, they are rendered as expected.

I created an example here: https://stackblitz.com/edit/nuxt-vuetify-ssr?file=app.vue

When the container loads, you'll notice none of the v-chips are rendered in active state, even though the v-model ref indicates the v-chips at index 1 and 4 should be in active state. If you disable SSR in nuxt.config.ts and reload the container, you'll notice the v-chips at index 1 and 4 are rendered in active state as expected.

No treeshaking functionality

Client load all Vuetify components including JS and styles even if I don't use them in my project:
https://github.com/vuetifyjs/vuetify-loader/assets/50024798/03fae70a-e684-454b-8b3b-b3c6b1e4d18e

my nuxt.config for vuetify:

  vuetify: {
    moduleOptions: {
      styles: { configFile: "assets/styles/vuetify-vars.scss" }
    },
    vuetifyOptions: "./config/vuetify.config.ts"
  }

Error when building for production using SCSS configFile

Having an issue when trying to build the app for production: https://ibb.co/HrsK1F3.

Here is my nuxt config:

export default defineNuxtConfig({
   css: ["@/assets/scss/index.scss"],

   // add modules
   modules: ["@nuxtjs/i18n",  "vuetify-nuxt-module"],

   i18n: {
      locales: [
         { code: "en", iso: "en-US", file: "en.ts" },
         { code: "es", iso: "es-ES", file: "es.ts" },
      ],

      lazy: true,
      langDir: "lang",
      defaultLocale: "en",
      detectBrowserLanguage: false,
      strategy: "no_prefix",
      baseUrl: "https://deploii.no/",

      vueI18n: "./config/i18n.config.ts",
   },

   vuetify: {
      moduleOptions: {
         styles: {
            configFile: "assets/scss/_variables.scss",
         },
      },
      vuetifyOptions: "./config/vuetify/vuetify.config.ts",
   },
})

My dependencies:

"devDependencies": {
      "@nuxt/devtools": "latest",
      "@nuxt/eslint-config": "^0.1.1",
      "@nuxt/image": "1.0.0-rc.1",
      "@nuxtjs/eslint-config-typescript": "^12.0.0",
      "@nuxtjs/i18n": "8.0.0-beta.13",
      "@pinia/nuxt": "^0.4.11",
      "@types/node": "^18",
      "eslint": "^8.42.0",
      "eslint-config-prettier": "^8.8.0",
      "nuxt": "^3.6.2",
      "pinia": "^2.1.4",
      "prettier": "^2.8.8",
      "sass": "^1.63.3",
      "vuetify-nuxt-module": "^0.5.6"
   },

Help would be much appreciated.

Issue when trying to run with VueFirebase

Hi

I am getting the following error whenever I add 'vuetify-nuxt-module' with 'nuxt-vuefire'.

Without 'vuetify-nuxt-module' my web application runs but soon as I add vuetify module I get the following errors :

Any ideas ?

[nuxt] [request error] [unhandled] [500] Cannot find module './call-credentials'
Require stack:

• /com.docker.devenvironments.code/nuxt-vuetify/@grpc/grpc-js
  at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
  at Module._load (node:internal/modules/cjs/loader:920:27)
  at Module.require (node:internal/modules/cjs/loader:1141:19)
  at require (node:internal/modules/cjs/helpers:110:18)
  at ./@grpc/grpc-js:20:28
  at ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:341:11)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:197:14)
  at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:231:12)
  at async ./@firebase/firestore:8:31

directives included when `false`

<v-spacer> is no longer in effect after build

Is the following problem caused by vuetify-nuxt-module?
I am building a website using Nuxt3.7.1 && vuetify-nuxt-module 0.5.7.
I am using <v-spacer> in several places, but when I yarn build, the problem is that the <v-spacer> does not allocate any space.

When working with yarn dev, <v-spacer> is converted to <div class="v-spacer"> and .v-spacer has flex-grow: 1 to reserve space.
However, when built, <v-spacer> is converted to <div class="v-spacer"> but no longer has flex-grow: 1, so no space is allocated.

It is VGrid.css that gives .v-spacer flex-grow: 1.
If you try and build with v-row or v-col somewhere, which are also from the VGrid family, the <v-spacer> problem goes away.

Perhaps if I don't use v-row or v-col, the VGrid is tree shaken and no longer affects the .v-spacer.
Is it possible to use only <v-spacer>?

Is this problem related to vuetify-nuxt-module?

How to use it with vue-fontawesome ?

Hello, thank you for this module, it works well for me. I have a question about font-awesome.

vue-fontawesome brings a better render (SVG + JS) to display font-awesome icons, which are a definite advantage, how can it be used with this module?

How to avoid style src attr ?

Hello,
I'm using this module with another one, nuxt-security, that allow me to generate CSP and nonce to make my website more secure. The CSP and nonce only work on styles added in <style /> but can't work in a style-src-attr, as for example :

<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr" style="z-index:1000;">

on the other hand, this one work:

<style id="vuetify-theme-stylesheet">:root {
      --v-theme-background: 255,255,255;
      --v-theme-background-overlay-multiplier: 1;
      --v-theme-surface: 255,255,255;
...

How do I get rid of style as an attribute and use it only in style tags?

Vuetify global components type are any

Repro :

npx nuxi@latest init my-app
npm i vuetify-nuxt-module -D 
# add 'vuetify-nuxt-module' to nuxt modules

The type of any vuetify global components are any in the template.

in components.d.ts in GlobalComponents when we change
'VBtn': typeof import("../node_modules/vuetify/lib/components/VBtn/index")['VBtn']
to
'VBtn': typeof import("../node_modules/vuetify/lib/components/VBtn/index.d.mts")['VBtn']
or to 'VBtn': typeof import("vuetify/components")['VBtn']

The typing becomes correct on the template :

I tested this with npm and pnpm in wsl node 19.8.1 and on windows with node 18.12.1 both with vscode typescript and volar takeover mode.

If someone can reproduce this to confirm.

[Layers] Error while requiring module `vuetify-nuxt-module`

Using with layers. When trying to generate, throws such error.

$ yarn install
yarn install v1.22.18
[1/4] Resolving packages...
success Already up-to-date.
$ nuxt prepare
[log] Nuxi 3.6.2
[info] [nuxt:tailwindcss] Using default Tailwind CSS file
[error] Error while requiring module `vuetify-nuxt-module`: Error: Cannot find module 'C:\GitLab-Runner-Front\builds\L34TKzhT\0\dit\front-vue\efo\efo\node_modules\vuetify-nuxt-module\node_modules\@nuxt\kit\dist\index.mjs'
[error] Cannot find module 'C:\GitLab-Runner-Front\builds\L34TKzhT\0\dit\front-vue\efo\efo\node_modules\vuetify-nuxt-module\node_modules\@nuxt\kit\dist\index.mjs'
  at createEsmNotFoundErr (node:internal/modules/cjs/loader:1098:15)
  at finalizeEsmResolution (node:internal/modules/cjs/loader:1091:15)
  at resolveExports (node:internal/modules/cjs/loader:567:14)
  at Module._findPath (node:internal/modules/cjs/loader:636:[31](https://gitlab.halyklife.nb/dit/front-vue/efo/-/jobs/10972#L31))
  at Module._resolveFilename (node:internal/modules/cjs/loader:1063:27)
  at Function.resolve (node:internal/modules/cjs/helpers:116:19)
  at _resolve (node_modules\jiti\dist\jiti.js:1:250100)
  at jiti (node_modules\jiti\dist\jiti.js:1:252409)
  at C:/GitLab-Runner-Front/builds/L[34](https://gitlab.halyklife.nb/dit/front-vue/efo/-/jobs/10972#L34)TKzhT/0/dit/front-vue/efo/efo/node_modules/vuetify-nuxt-module/dist/module.mjs:1:174
  at evalModule (node_modules\jiti\dist\jiti.js:1:255106)
error Command failed with exit code 1.

Any ideas?

Add layers support

Font-Awesome Config Example

Please show how to add fontawesome to this.

add support for theme configuration

After reading the file /src/vite/vuetify-configuration-plugin.ts I didn't see some kind of support for theme configuration at plugin level.

Is it something that is doable ?

Is there a better opiniated way to do it (e.g useTheme()) ?

Thanks !

Vuetify styles configFile with settings and SSR breaks nuxt generate

Reproduce:
Create a settings.scss file with settings (see https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#style-loading)

@use 'vuetify/settings' with
  ($utilities: false, $button-height: 40px, $label-font-size: 0.7rem);

Set this settings file to vuetify-nuxt-module moduleOptions and enable SSR:

export default defineNuxtConfig({
  ssr: true,
  modules: ['vuetify-nuxt-module'],

  vuetify: {
    moduleOptions: {
      styles: { configFile: '/settings.scss' },
    },
  },
})

Run nuxt generate. Following error is happening, when the server is built:

Nuxi 3.6.5                                                                                                                                                                      
Nuxt 3.6.5 with Nitro 2.5.2    
...  
ℹ Building server...                                                                                                                                                         
ℹ vite v4.3.9 building SSR bundle for production...                                                                                                                     
ℹ ✓ 374 modules transformed.                                                                                                                                                  
ℹ ✓ built in 15.32s                                                                                                                                                            

ERROR  [vite:load-fallback] Could not load /plugin-vuetify/lib/components/VMessages/VMessages.sass?inline&used: ENOENT: no such file or directory, open '/plugin-vuetify/lib/components/VMessages/VMessages.sass?inline&used'
ERROR  Could not load /plugin-vuetify/lib/components/VMessages/VMessages.sass?inline&used: ENOENT: no such file or directory, open '/plugin-vuetify/lib/components/VMessages/VMessages.sass?inline&used'
ELIFECYCLE  Command failed with exit code 1.

This StackBlitz reproduces the problem: https://stackblitz.com/edit/github-p6ty8t?file=playground%2Fnuxt.config.mts

Workaround:
No workaround found, yet. Disabling SSR does not cause the problem.

Wrong start color-scheme if ssr true

Hello,
I want my site to automatically display the dark or light version of vuetify, this code won't work if ssr: true
so I coded this example : https://stackblitz.com/github/greyxor/nuxt-vuetify-bug-scheme

The problem is that when the site opens, vuetify stay in a strange state, half of website is light, and other half is dark the light scheme (my system is in dark scheme)

once on the site, if I change the scheme system setting to dark or light, then it works correctly.

Also if i disable nuxt SSR, then that fix the problem and theme is directly good at start of website

No connectivity between i18n and Vuetify.locale

When I changing i18n locale it doesn`t change Vuetify.locale.current (useLocale().current)

I have '@nuxtjs/i18n' and 'vuetify-nuxt-module' in my nuxt.config...

warmup is slow when using "moduleOptions.styles.configFile"

For some reason this config takes more than 40 seconds to warm up.

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  ssr: true,
  modules: ["vuetify-nuxt-module", 'nuxt-purgecss'],
  css: ["vuetify/styles"],
  devtools: { enabled: true },
  vuetify: {
    moduleOptions: {
      styles: { configFile: "/styles/settings.scss" },
    },
  },
  experimental: {
    inlineSSRStyles: false,
  },
});

/*settings.scss*/

@use "vuetify/settings" with (
  $utilities: false,
  $color-pack: false,
  $button-color: red
);

without setting the configFile, it takes less than 2 seconds.

help? Am I doing something wrong?

missing runtime plugins in dev

Little confusion when testing playground - $utilities: false

I wanted to test turning off $utilities in our playground. Please refer to these four arrows in this screenshot.

1. Clone our module, then pnpm install

2. Uncomment the two lines in playground/nuxt.config.mts as indicated by the arrows in the left, in order to use main.scss & settings.scss for sass customization.

3. Start dev-server pnpm dev.

4. $utilities: false works (sample page loses design as expected) only when setting it in main.scss under @use "vuetity".

5. $utilities: false doesn't have any effect when setting it in settings.scss under @use "vuetify/settings", which is contrary to Vuetify docs.

Wondering if Vuetify docs is wrong, and our playground seem to have $utilities: false in both files, and adds to the confusion, and doesn't work as per Vuetify docs (or) the Vuetify vite plugin readme page.

Appreciate some clarification here, as official scaffolding using pnpm create vuetify doesn't prompt and create a new project fit for sass customization.

Neither they have any simple sample repos demonstrating how sass customization can be done. This playground is the only place that has a sass setup for the community (as far as I know).

Thanks!

add Nuxt DevTools?

• prepare integration
• list Vuetify components: there is no need since we now load the components via Nuxt
• allow change colors
• allow switch theme and list themes
• allow switch locale and list locales

Add custom icon font

I would like to add a Phosphor icons to my project, and I am trying to include it as a custom icon set like described in the Vuetify documentation. However it looks like this module doesn't accept custom icon sets:

interface IconsOptions {
    /**
     * @default 'mdi'
     */
    defaultSet: IconSetName;
    /**
     * The prefix for UnoCSS Preset Icons.
     *
     * @default 'i-'
     */
    unocssIconPrefix?: string;
    sets?: IconFontName | IconFontName[] | FontIconSet[];
    svg?: {
        mdi?: JSSVGIconSet;
        fa?: FontAwesomeSvgIconSet;
    };
}

If I look at the types from Vuetify I can see that sets should accept a component

interface IconSet {
    component: IconComponent;
}
type IconOptions = {
    defaultSet?: string;
    aliases?: Partial<IconAliases>;
    sets?: Record<string, IconSet>;
};

which corresponds well with the Vuetify docs for adding a custom icon sets using a render function.

how to add custom theme and icons in plugin

i have file of icons and custom theme which i want to include in plugin , how to do so ? i have following cod in plugin

import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components/VBtn'
import defaults from './vuetify/defaults'
import { icons } from './vuetify/icons'
import theme from './vuetify/theme'
import '@core/scss/template/libs/vuetify/index.scss'
import 'vuetify/styles'



export default defineNuxtPlugin(({ vueApp }) => {

const vueitfy =  createVuetify({
    aliases: {
      IconBtn: VBtn,
    },
    defaults,
    icons,
    theme,
  })
  console.log('vuetify.ts is working' , vueitfy)
vueApp.use(vueitfy)
})

add documentation

add date support

https://vuetifyjs.com/en/features/dates/#adapter

Specified Icon font cdn not used

It seems the cdn option to override the default font icon cdn is not respected
https://vuetify-nuxt-module.netlify.app/guide/icons/font-icons.html#font-icons

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module', '@pinia/nuxt'],
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'mdi',
        sets: [{
          name: 'mdi',
          cdn: 'https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.2.96/css/materialdesignicons.min.css'
        }]
      }
    }
  }
})

but it still tries the default cdn :

(in my case cdn.jsdeliver is blocked)

add icons support

Related issue #10

Working with font-awesome pro ?

Hello, I have a Font-Awesome Pro license and this is my package.json

  "devDependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/pro-duotone-svg-icons": "^6.4.0",
    "@fortawesome/vue-fontawesome": "^3.0.3",
    "nuxt": "^3.6.3",
    "vuetify-nuxt-module": "^0.4.4"
  }

But I get this message :

 WARN  Missing library @fortawesome/free-solid-svg-icons dependency, install it!                                                                                                                           nuxt:vuetify 9:46:46 AM

 WARN  No icons found, icons disabled! 

Do I miss something ? I don't need free-solid-svg-icons, just the pro-duotone, thanks!

Configuration via a ./vuetify.config.ts file

Is your feature request related to a problem? Please describe

No response

Describe the solution you'd like

I would like to be able to add a vuetify.config.js file at the root directory (./vuetify.config.js)

Describe alternatives you've considered

No response

Additional context

Being able to add the config at the root (vuetify.config.js) would make the nuxt.config.js file cleaner and smaller. Since we all know that the config for vuetify can be almost 50+ lines, it would be nice to seperate it. I know that nuxt i18n allow that and im pretty sure that would be a good approach for this module too.

Here is the doc for the vue i18n module for that feature:
https://v8.i18n.nuxtjs.org/options/vue-i18n

What do you guys think about this idea?

Layers should have vuetify key

When using layers, should have vuetify to avoid load/scan other modules.

Should revert last PR changes (partially)

Check if the vuetify nuxt module included in layers.

cannot start nuxt: `path.isAbsolute` is not a function

use unplugin to allow work with webpack 5

[Feature] Add support for google font integration

Vuetify by default google roboto font. Would it be a good idea to setup roboto font within this module?

useNuxtApp().$vuetify is only available after the middleware

Hi,
thanks for the great module! Currently evaluating to replace our custom integration with it. One problem I run into is that the plugin is only registered after the middleware.

https://github.com/userquin/vuetify-nuxt-module/blob/804abc7fe16ac69264eba0ad6163f9ba9089a77d/src/runtime/plugins/vuetify.ts#L5-L11

In our use-case we have some checkups in a global middleware that e.g checks for the user and hydrates the user-state which includes setting the theme:

const nuxtApp = useNuxtApp();
const vuetify = nuxtApp.$vuetify;
vuetify.global.name.value = theme;

This isn't possible with the module, as nuxtApp.$vuetify is still undefined at this point.

Is there any specific reason to only register it afterwards?
Looking forward to your feedback.

Thanks!

add support for NuxtIcon

https://github.com/nuxt-modules/icon

Support for `pnpm`

When using this module with pnpm, following error occurs:

> nuxt-module-build --stub && nuxi prepare playground
│ 'nuxt-module-build' is not recognized as an internal or external command,
│ operable program or batch file.
│  ELIFECYCLE  Command failed with exit code 1.
│  WARN   Local package.json exists, but node_modules missing, did you mean to install?

I18n not working

Trying to fix i18n, it seems locales not being loaded when using lazy load, maybe a bug here or a bug in i18n module

nuxt-modules/i18n#2192

cannot registed global components

add support for unplugin-icons

https://github.com/antfu/unplugin-icons

Vuetify locales not found in combination with i18n

When using the 'vuetify-nuxt-module' in a completley new Nuxt 3 project the Vuetify locales (e.g 'vuetify/lib/locale/en.mjs') is not found after installing i18n.

Same thing happens to the vuetify-nuxt-module playground after adding a <v-pagination :length="2"></v-pagination>.

Intlify complains about missing $vuetify locale messages:

[20:33:51] [intlify] Not found '$vuetify.pagination.ariaLabel.root' key in 'en' locale messages.
[20:33:51] [intlify] Not found '$vuetify.pagination.ariaLabel.previous' key in 'en-US' locale messages.
[20:33:51] [intlify] Fall back to translate '$vuetify.pagination.ariaLabel.previous' key with 'en' locale.
[20:33:51] [intlify] Not found '$vuetify.pagination.ariaLabel.previous' key in 'en' locale messages.
[20:33:51] [intlify] Not found '$vuetify.pagination.ariaLabel.next' key in 'en-US' locale messages.
[20:33:51] [intlify] Fall back to translate '$vuetify.pagination.ariaLabel.next' key with 'en' locale.
[20:33:51] [intlify] Not found '$vuetify.pagination.ariaLabel.next' key in 'en' locale messages.
[20:33:51] [intlify] Not found '$vuetify.pagination.ariaLabel.currentPage' key in 'en-US' locale messages.
[20:33:51] [intlify] Fall back to translate '$vuetify.pagination.ariaLabel.currentPage' key with 'en' locale.
[20:33:51] [intlify] Not found '$vuetify.pagination.ariaLabel.currentPage' key in 'en' locale messages.

some global components cannot be used

Some components are exported from another packages, for example VExpansionPanelTitle is exported from VExpansionPanel, we need to build the imports using the imports map to in the virtual configuration module

don't use `vite-plugin-vuetify`

There is no need to use vite-plugin-vuetify plugin, we can use nuxt to load Vuetify components using the definition exposed by Vuetify.

handle Vuetify `blueprint`

Feature Request - Support for transformAssetUrls

Currently, we have to manually add transformAssetUrls by importing it from vite-plugin-vuetify.

The default values use src while it will be different for nuxt.

Would be great to have this integrated into our module. Thanks!

More details here

• https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#image-loading (https://github.com/vuetifyjs/vuetify-loader/blob/master/packages/shared/src/index.ts#L52)
• https://stackoverflow.com/a/75511457 (extract below for quick look)
• vuetifyjs/vuetify-loader#237

Vuetify's vite plugin has a preset for this to support vuetify components:

// vite.config.js
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

export default {
  plugins: [
    vue({ 
      template: { transformAssetUrls }
    }),
    vuetify(),
  ],
}

Can't add a new Vuetify icon set

I'm trying to follow the guide on the docs site but it's not working for me. Would I be able to get some help?

I'm getting the error: aliases is not defined

[nuxt] [request error] [unhandled] [500] aliases is not defined
  at Module.iconsConfiguration (/@nuxt-vuetify-configuration/vuetify-icons-configuration:10:5)  
  at Module.configureIcons (./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/vuetify-nuxt-module/dist/runtime/plugins/icons.mjs:5:50)  
  at ./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/vuetify-nuxt-module/dist/runtime/plugins/vuetify-icons.mjs:7:27  
  at ./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]_typ_rb4vbjg7aaksx7nzfntqydkqsa/node_modules/nuxt/dist/app/nuxt.js:65:44  
  at fn (./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]_typ_rb4vbjg7aaksx7nzfntqydkqsa/node_modules/nuxt/dist/app/nuxt.js:162:44)  
  at Object.callAsync (./node_modules/.pnpm/[email protected]/node_modules/unctx/dist/index.mjs:68:55)  
  at ./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]_typ_rb4vbjg7aaksx7nzfntqydkqsa/node_modules/nuxt/dist/app/nuxt.js:164:56  
  at Object.runWithContext (./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3855:18)  
  at callWithNuxt (./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]_typ_rb4vbjg7aaksx7nzfntqydkqsa/node_modules/nuxt/dist/app/nuxt.js:164:24)  
  at Object.runWithContext (./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]_typ_rb4vbjg7aaksx7nzfntqydkqsa/node_modules/nuxt/dist/app/nuxt.js:34:29)

Here's my config files

// nuxt.config.ts
import { type NuxtConfig } from "nuxt/config";
export default {
  modules: [
    // ...
    "@unocss/nuxt",
    "vuetify-nuxt-module",
  ],
  vuetify: {
    moduleOptions: {
      styles: true,
    },
  },
  // ...
} satisfies NuxtConfig;

// vuetify.config.ts
import { type ExternalVuetifyOptions } from "vuetify-nuxt-module";
export default {
  icons: {
    defaultSet: "custom",
  },
} satisfies ExternalVuetifyOptions;

// plugins/vuetify.ts
// @unocss-include
import { mdi } from "vuetify/lib/iconsets/mdi.mjs";
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook("vuetify:configuration", ({ vuetifyOptions }) => {
    vuetifyOptions.icons = {
      defaultSet: "mdi",
      sets: { mdi },
      aliases: {
        // ...
      },
    };
  });
});

On a sidenote

The types for the vuetify:configuration hook don't seem to be registering for me. The hook is definitely running though as if I add a console.log to it, the data is printed out.