vuetify-nuxt-module 0.4.10 → 0.4.12

package/README.md

@@ -1,99 +1,100 @@
-<div align="center">
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/userquin/vuetify-nuxt-module/raw/main/hero-dark.svg" />
-  <img alt="vuetify-nuxt-module - Zero-config Nuxt module for Vuetify" src='https://github.com/userquin/vuetify-nuxt-module/raw/main/hero.svg' alt="vuetify-nuxt-module - Zero-config Nuxt module for Vuetify"><br>
-</picture>
-<p>Zero-config Nuxt module for Vuetify</p>
-</div>
-
-<p align='center'>
-<a href='https://www.npmjs.com/package/vuetify-nuxt-module' target="__blank">
-<img src='https://img.shields.io/npm/v/vuetify-nuxt-module?color=33A6B8&label=' alt="NPM version">
-</a>
-<a href="https://www.npmjs.com/package/vuetify-nuxt-module" target="__blank">
-    <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/vuetify-nuxt-module?color=476582&label=">
-</a>
-<a href="https://vuetify-nuxt-module.netlify.app/" target="__blank">
-    <img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20guides&color=2e859c" alt="Docs & Guides">
-</a>
-<br>
-<a href="https://github.com/userquin/vuetify-nuxt-module" target="__blank">
-<img alt="GitHub stars" src="https://img.shields.io/github/stars/userquin/vuetify-nuxt-module?style=social">
-</a>
-</p>
-
-<br>
-
-## 🚀 Features
-
-- 📖 [**Documentation & guides**](https://vuetify-nuxt-module.netlify.app/)
-- 👌 **Zero-Config**: sensible built-in default [Vuetify](https://vuetifyjs.com/) configuration for common use cases
-- 🔌 **Extensible**: expose the ability to customize the Vuetify configuration via [Nuxt Plugin Hooks](https://nuxt.com/docs/guide/going-further/hooks#usage-with-plugins)
-- ⚡ **Fully Tree Shakable**: by default, only the needed Vuetify components are imported
-- 🛠️ **Versatile**: custom Vuetify [directives](https://vuetifyjs.com/en/getting-started/installation/#manual-steps) and [labs components](https://vuetifyjs.com/en/labs/introduction/) registration
-- ✨ **Configurable Styles**: configure your variables using [Vuetify SASS Variables](https://vuetifyjs.com/en/features/sass-variables/) 
-- 💥 **SSR**: automatic SSR detection and configuration
-- 🔥 **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](https://vuetifyjs.com/en/features/icon-fonts/) you want to use, the module will automatically import it for you using CDN or local dependencies
-- 🎭 **SVG Icons**: ready to use [@mdi/js](https://www.npmjs.com/package/@mdi/js) and [@fortawesome/vue-fontawesome](https://www.npmjs.com/package/@fortawesome/vue-fontawesome) SVG icons packs
-- 📦 **Multiple Icon Sets**: register [multiple icon sets](https://vuetifyjs.com/en/features/icon-fonts/#multiple-icon-sets)
-- 🌍 **I18n Ready**: install [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module, and you're ready to use Vuetify [internationalization](https://vuetifyjs.com/en/features/internationalization/) features
-- 📆 **Date Components**: use Vuetify components [that require date functionality](https://vuetifyjs.com/en/features/dates/) installing and configuring one of the [@date-io](https://github.com/dmtrKovalenko/date-io#projects) adapters
-- ⚙️ **Auto-Import Vuetify Composables**: you don't need to import Vuetify composables manually, they are automatically imported for you
-- 🎨 **Vuetify Blueprints**: use [Vuetify Blueprints](https://vuetifyjs.com/en/features/blueprints/) to quickly scaffold components
-- 🔩 **Nuxt Layers and Hooks**: load your Vuetify configuration using [Nuxt Layers](https://nuxt.com/docs/getting-started/layers#layers) or using a custom module via `vuetify:registerModule` [Nuxt Hook](https://nuxt.com/docs/guide/going-further/hooks#nuxt-hooks-build-time)
-- 👀 **Nuxt DevTools**: ready to inspect your Vuetify styles with the [Nuxt DevTools](https://github.com/nuxt/devtools) inspector
-- 🦾 **Type Strong**: written in [TypeScript](https://www.typescriptlang.org/)
-
-## 📦 Install
-
-> Requires Vite, will not work with Webpack
-
-```bash
-npm i vuetify-nuxt-module -D 
-
-# yarn 
-yarn add vuetify-nuxt-module -D
-
-# pnpm 
-pnpm add vuetify-nuxt-module -D
-```
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/userquin/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:
-
-```ts
-// 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](https://vuetify-nuxt-module.netlify.app/) for a complete guide on how to configure and use this module.
-
-## 👀 Full config
-
-Check out the [types](https://github.com/userquin/vuetify-nuxt-module/blob/main/src/types.ts).
-
-The virtual modules can be found in [configuration.d.ts](https://github.com/userquin/vuetify-nuxt-module/blob/main/configuration.d.ts) file.
-
-## 📄 License
-
-[MIT](https://github.com/userquin/vuetify-nuxt-module/blob/main/LICENSE) License &copy; 2023-PRESENT [Joaquín Sánchez](https://github.com/userquin)
+<div align="center">
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/userquin/vuetify-nuxt-module/raw/main/hero-dark.svg" />
+  <img alt="vuetify-nuxt-module - Zero-config Nuxt module for Vuetify" src='https://github.com/userquin/vuetify-nuxt-module/raw/main/hero.svg' alt="vuetify-nuxt-module - Zero-config Nuxt module for Vuetify"><br>
+</picture>
+<p>Zero-config Nuxt module for Vuetify</p>
+</div>
+
+<p align='center'>
+<a href='https://www.npmjs.com/package/vuetify-nuxt-module' target="__blank">
+<img src='https://img.shields.io/npm/v/vuetify-nuxt-module?color=33A6B8&label=' alt="NPM version">
+</a>
+<a href="https://www.npmjs.com/package/vuetify-nuxt-module" target="__blank">
+    <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/vuetify-nuxt-module?color=476582&label=">
+</a>
+<a href="https://vuetify-nuxt-module.netlify.app/" target="__blank">
+    <img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20guides&color=2e859c" alt="Docs & Guides">
+</a>
+<br>
+<a href="https://github.com/userquin/vuetify-nuxt-module" target="__blank">
+<img alt="GitHub stars" src="https://img.shields.io/github/stars/userquin/vuetify-nuxt-module?style=social">
+</a>
+</p>
+
+<br>
+
+## 🚀 Features
+
+- 📖 [**Documentation & guides**](https://vuetify-nuxt-module.netlify.app/)
+- 👌 **Zero-Config**: sensible built-in default [Vuetify](https://vuetifyjs.com/) configuration for common use cases
+- 🔌 **Extensible**: expose the ability to customize the Vuetify configuration via [Nuxt Plugin Hooks](https://nuxt.com/docs/guide/going-further/hooks#usage-with-plugins)
+- ⚡ **Fully Tree Shakable**: by default, only the needed Vuetify components are imported
+- 🛠️ **Versatile**: custom Vuetify [directives](https://vuetifyjs.com/en/getting-started/installation/#manual-steps) and [labs components](https://vuetifyjs.com/en/labs/introduction/) registration
+- ✨ **Configurable Styles**: configure your variables using [Vuetify SASS Variables](https://vuetifyjs.com/en/features/sass-variables/) 
+- 💥 **SSR**: automatic SSR detection and configuration
+- 🔥 **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](https://vuetifyjs.com/en/features/icon-fonts/) you want to use, the module will automatically import it for you using CDN or local dependencies
+- 🎭 **SVG Icons**: ready to use [@mdi/js](https://www.npmjs.com/package/@mdi/js) and [@fortawesome/vue-fontawesome](https://www.npmjs.com/package/@fortawesome/vue-fontawesome) SVG icons packs
+- 📦 **Multiple Icon Sets**: register [multiple icon sets](https://vuetifyjs.com/en/features/icon-fonts/#multiple-icon-sets)
+- 🌍 **I18n Ready**: install [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module, and you're ready to use Vuetify [internationalization](https://vuetifyjs.com/en/features/internationalization/) features
+- 📆 **Date Components**: use Vuetify components [that require date functionality](https://vuetifyjs.com/en/features/dates/) installing and configuring one of the [@date-io](https://github.com/dmtrKovalenko/date-io#projects) adapters
+- 💬 **Auto-Import Vuetify Locale Messages**: add [Vuetify Locale Messages](https://vuetifyjs.com/en/features/internationalization/#getting-started) 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](https://vuetifyjs.com/en/features/blueprints/) to quickly scaffold components
+- 🔩 **Nuxt Layers and Hooks**: load your Vuetify configuration using [Nuxt Layers](https://nuxt.com/docs/getting-started/layers#layers) or using a custom module via `vuetify:registerModule` [Nuxt Hook](https://nuxt.com/docs/guide/going-further/hooks#nuxt-hooks-build-time)
+- 👀 **Nuxt DevTools**: ready to inspect your Vuetify styles with the [Nuxt DevTools](https://github.com/nuxt/devtools) inspector
+- 🦾 **Type Strong**: written in [TypeScript](https://www.typescriptlang.org/)
+
+## 📦 Install
+
+> Requires Vite, will not work with Webpack
+
+```bash
+npm i vuetify-nuxt-module -D 
+
+# yarn 
+yarn add vuetify-nuxt-module -D
+
+# pnpm 
+pnpm add vuetify-nuxt-module -D
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/userquin/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:
+
+```ts
+// 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](https://vuetify-nuxt-module.netlify.app/) for a complete guide on how to configure and use this module.
+
+## 👀 Full config
+
+Check out the [types](https://github.com/userquin/vuetify-nuxt-module/blob/main/src/types.ts).
+
+The virtual modules can be found in [configuration.d.ts](https://github.com/userquin/vuetify-nuxt-module/blob/main/configuration.d.ts) file.
+
+## 📄 License
+
+[MIT](https://github.com/userquin/vuetify-nuxt-module/blob/main/LICENSE) License &copy; 2023-PRESENT [Joaquín Sánchez](https://github.com/userquin)

package/dist/module.d.ts

@@ -93,6 +93,15 @@ type LabComponentName = keyof typeof vuetify_labs_components;
 type LabComponents = boolean | LabComponentName | LabComponentName[];
 type VuetifyLocale = keyof typeof vuetify_locale;
 interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'aliases' | 'components' | 'directives' | 'locale' | 'date' | 'icons'>> {
+    /**
+     * Configure the SSR options.
+     *
+     * This option is only used when SSR is enabled in your Nuxt configuration.
+     */
+    ssr?: {
+        clientWidth: number;
+        clientHeight?: number;
+    };
     aliases?: Record<string, ComponentName>;
     /**
      * Do you need to configure some global components?.

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.4.10"
+  "version": "0.4.12"
 }

package/dist/module.mjs

@@ -6,7 +6,7 @@ import { isAbsolute, join, relative } from 'pathe';
 import { normalizePath as normalizePath$1 } from 'vite';
 import { isPackageExists } from 'local-pkg';
 
-const version = "0.4.10";
+const version = "0.4.12";
 
 function isSubdir(root, test) {
   const relative$1 = relative(root, test);
@@ -184,16 +184,19 @@ const RESOLVED_VIRTUAL_VUETIFY_DATE_CONFIGURATION = `/@nuxt-vuetify-configuratio
 const VIRTUAL_VUETIFY_ICONS_CONFIGURATION = "virtual:vuetify-icons-configuration";
 const RESOLVED_VIRTUAL_VUETIFY_ICONS_CONFIGURATION = `/@nuxt-vuetify-configuration/${VIRTUAL_VUETIFY_ICONS_CONFIGURATION.slice("virtual:".length)}`;
 
-function vuetifyConfigurationPlugin(isDev, i18n, directives, labComponents, vuetifyAppOptions, componentsPromise, labComponentsPromise, logger) {
+function vuetifyConfigurationPlugin(isDev, isSSR, i18n, directives, labComponents, vuetifyAppOptions, componentsPromise, labComponentsPromise, logger) {
   const {
     directives: _directives,
     date: _date,
     icons: _icons,
     localeMessages,
     components,
+    ssr,
     aliases,
     ...newVuetifyOptions
   } = vuetifyAppOptions;
+  if (isSSR)
+    newVuetifyOptions.ssr = ssr ?? true;
   return {
     name: "vuetify:configuration:nuxt",
     enforce: "pre",
@@ -481,7 +484,7 @@ function prepareIcons(unocssPresent, logger, vuetifyOptions) {
       defaultSet = "mdi";
       sets = sets.filter((s) => s.name !== "unocss-mdi");
     }
-    sets.filter((s) => cssFonts.includes(s.name)).map((s) => s.name).forEach((name) => {
+    sets.filter((s) => cssFonts.includes(s.name)).forEach(({ name, cdn }) => {
       if (name === "unocss-mdi")
         return;
       resolvedIcons.imports.push(`import {${name === defaultSet ? "aliases," : ""}${name}} from 'vuetify/iconsets/${name}'`);
@@ -489,7 +492,7 @@ function prepareIcons(unocssPresent, logger, vuetifyOptions) {
       if (isPackageExists(iconsPackageNames[name].name))
         resolvedIcons.local.push(iconsPackageNames[name].css);
       else
-        resolvedIcons.cdn.push(iconsCDN[name]);
+        resolvedIcons.cdn.push(cdn ?? iconsCDN[name]);
     });
     if (resolvedIcons.unocss && defaultSet === "unocss-mdi") {
       if (!resolvedIcons.sets.includes("mdi")) {
@@ -815,9 +818,7 @@ const module = defineNuxtModule({
       prefixComposables: false
     });
     const isSSR = nuxt.options.ssr;
-    const vuetifyAppOptions = defu(vOptions, {
-      ssr: isSSR
-    });
+    const vuetifyAppOptions = defu(vOptions, {});
     cleanupBlueprint(vuetifyAppOptions);
     const { styles } = moduleOptions;
     const i18n = hasNuxtModule("@nuxtjs/i18n", nuxt);
@@ -914,6 +915,7 @@ const module = defineNuxtModule({
       viteInlineConfig.plugins.push(vuetifyStylesPlugin({ styles }, logger));
       viteInlineConfig.plugins.push(vuetifyConfigurationPlugin(
         nuxt.options.dev,
+        isSSR,
         i18n,
         directives,
         labComponents,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "packageManager": "pnpm@8.6.9",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",