{"id":13506534,"url":"https://github.com/nuxt-community/vuetify-module","last_synced_at":"2025-05-14T02:06:40.279Z","repository":{"id":38629917,"uuid":"169397942","full_name":"nuxt-community/vuetify-module","owner":"nuxt-community","description":"Vuetify Module for Nuxt 2","archived":false,"fork":false,"pushed_at":"2025-05-08T04:40:52.000Z","size":3538,"stargazers_count":630,"open_issues_count":129,"forks_count":102,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-05-11T05:34:16.667Z","etag":null,"topics":["nuxt","nuxt-module","vue","vuetify"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nuxt-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-06T11:47:55.000Z","updated_at":"2025-05-07T07:38:43.000Z","dependencies_parsed_at":"2022-07-09T18:00:44.507Z","dependency_job_id":"1f94a3ef-0e61-43d7-8a1b-577c9d6bf4ff","html_url":"https://github.com/nuxt-community/vuetify-module","commit_stats":{"total_commits":247,"total_committers":27,"mean_commits":9.148148148148149,"dds":0.5465587044534412,"last_synced_commit":"dfd4ffbca92b5dacd533cc40af854b930221e410"},"previous_names":[],"tags_count":74,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Fvuetify-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Fvuetify-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Fvuetify-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Fvuetify-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxt-community","download_url":"https://codeload.github.com/nuxt-community/vuetify-module/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253695490,"owners_count":21948883,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","nuxt-module","vue","vuetify"],"created_at":"2024-08-01T01:00:53.350Z","updated_at":"2025-05-14T02:06:35.266Z","avatar_url":"https://github.com/nuxt-community.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","TypeScript"],"sub_categories":["Uncategorized"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/904724/59509947-c14eca80-8eb2-11e9-807c-14e7cc72eecc.png\" alt=\"nuxt-tailwindcss\" width=\"500\"/\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.com/package/@nuxtjs/vuetify\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@nuxtjs/vuetify.svg?style=flat-square\" alt=\"npm downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/@nuxtjs/vuetify\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/@nuxtjs/vuetify.svg?style=flat-square\" alt=\"npm version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://circleci.com/gh/nuxt-community/vuetify-module\"\u003e\u003cimg src=\"https://img.shields.io/circleci/project/github/nuxt-community/vuetify-module.svg?style=flat-square\" alt=\"circle ci\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/nuxt-community/vuetify-module\"\u003e\u003cimg src=\"https://img.shields.io/codecov/c/github/nuxt-community/vuetify-module.svg?style=flat-square\" alt=\"coverage\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@nuxtjs/vuetify\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@nuxtjs/vuetify.svg?style=flat-square\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e [Vuetify 2](https://vuetifyjs.com) module for [Nuxt 2](https://nuxt.com)\n\n## Nuxt 3\n\nLooking for a Nuxt 3 solution? Try out: \n- [userquin/vuetify-nuxt-module](https://github.com/userquin/vuetify-nuxt-module)\n- [nuxt-alt/vuetify](https://github.com/nuxt-alt/vuetify)\n\n## Infos\n\n- [📖 **Release Notes**](./CHANGELOG.md)\n- [🏀 **Online playground**](https://codesandbox.io/s/nuxtjs-vuetify-v0k7i)\n- [🛠 **Migration guide from Vuetify 1.5.x**](./MIGRATION_GUIDE.md)\n- [🏷 **Module for Vuetify 1.5.x**](https://github.com/nuxt-community/vuetify-module/tree/0.x)\n\n## Setup\n\n1. Add `@nuxtjs/vuetify` dependency to your project\n\n```bash\nyarn add --dev @nuxtjs/vuetify # or npm install --save-dev @nuxtjs/vuetify\n```\n\n2. Add `@nuxtjs/vuetify` to the `buildModules` section of `nuxt.config.js`\n\n:warning: If you are using Nuxt `\u003c 2.9.0`, use `modules` instead.\n\n```js\n{\n  buildModules: [\n    // Simple usage\n    '@nuxtjs/vuetify',\n\n    // With options\n    ['@nuxtjs/vuetify', { /* module options */ }]\n  ]\n}\n```\n\n### Using top level options\n\n```js\n{\n  buildModules: [\n    '@nuxtjs/vuetify'\n  ],\n  vuetify: {\n    /* module options */\n  }\n}\n```\n\n## Options\n\n### `customVariables`\n\n- Type: `Array`\n  - Items: `String`\n- Default: `[]`\n\nProvide a way to customize Vuetify SASS variables.  \n**Only works with [tree-shaking](#treeShake).**\n\nUsage example : \n\n```scss\n// assets/variables.scss\n\n// Variables you want to modify\n$btn-border-radius: 0px;\n\n// If you need to extend Vuetify SASS lists\n$material-light: ( cards: blue );\n\n@import '~vuetify/src/styles/styles.sass';\n```\n\n```js\n// nuxt.config.js\nexport default {\n  vuetify: {\n    customVariables: ['~/assets/variables.scss']\n  }\n}\n```\n\n\u003e The list of customizable variables can be found by looking at the files [here](https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/src/styles/settings).\n\n### `defaultAssets`\n\n- Type: `Object` or `Boolean` \n- Default: \n```js\n{\n  font: {\n    family: 'Roboto' \n  },\n  icons: 'mdi'\n}\n```\n\nBy default, automatically handle **Roboto** font \u0026 **Material Design Icons**.\n\nThese assets are handled automatically by default to provide a zero-configuration which let you play directly with Vuetify.\n\n`defaultAssets.font.family` automatically adds the specified font (default **Roboto**) stylesheet from official google fonts to load the font with `font-display: swap`.\nIf you have [nuxt-webfontloader](https://github.com/Developmint/nuxt-webfontloader) in your `modules`, it will use it automatically.\n\n`defaultAssets.font.size` allows you to specify the root font size in your application.\n\n:warning: If you choose a custom font family (i.e. not **Roboto**), it will automatically override Vuetify SASS variables (`$body-font-family` \u0026 `font-size-root`), but you will need [tree-shaking](#treeShake) to be enabled to have them correctly applied.\n\n`defaultAssets.icons` automatically adds the icons stylesheet from a CDN to load all the icons (**not optimized for production**).  \nHere are the accepted values for this option :\n\n| Value | Icons |\n|-------|-------|\n| `'mdi'` (default) | [Material Designs Icons](https://materialdesignicons.com/) ([CDN](https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css)) \n| `'md'`  | [Material Icons](https://material.io/resources/icons/) ([CDN](https://fonts.googleapis.com/css?family=Material+Icons))\n| `'fa'` |  [Font Awesome 5](https://fontawesome.com/icons) ([CDN](https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css))\n| `'fa4'` |  [Font Awesome 4](https://fontawesome.com/v4.7.0/icons/) ([CDN](https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css))\n| `false` | Disable auto add of the icons stylesheet\n\n\u003e This option (if not set to `false`) will automatically override `icons.iconfont` Vuetify option so that Vuetify components use these icons.\n\nPlease refer to [Vuetify Icons documentation](https://vuetifyjs.com/en/customization/icons) for more information about icons, notably for using only bunch of SVG icons instead of including all icons in your app.\n\nYou can also set the whole `defaultAssets` option to `false` to prevent any automatic add of these two assets. \nYou can read more about adding your own assets in the [Offline applications](https://github.com/nuxt-community/vuetify-module#offline-applications) section. \n\n### `optionsPath`\n\n- Type: `String`\n\nLocation of the Vuetify options that will be passed to Vuetify.\n\nThis file will be compiled by **webpack**, which means you'll benefit fast hot reload when changing these options, but also be able to use TypeScript without being forced to use TypeScript runtime.\n\n```js\n// nuxt.config.js\nexport default {\n  vuetify: {\n    optionsPath: './vuetify.options.js'\n  }\n}\n```\n\n\u003e Note that you can also use [Directory Aliases](https://nuxtjs.org/guide/directory-structure#aliases) like `'~/path/to/option.js'`\n\nAll vuetify options are supported, it includes : \n- [**Breakpoints**](https://vuetifyjs.com/en/customization/breakpoints)\n- [**Icons**](https://vuetifyjs.com/en/customization/icons)\n- [**Internationalization (i18n)**](https://vuetifyjs.com/en/customization/internationalization)\n- [**RTL (bidirectionality)**](https://vuetifyjs.com/en/customization/rtl)\n- [**Theme**](https://vuetifyjs.com/en/customization/theme) \n\n\n```js\n// vuetify.options.js\nexport default {\n  breakpoint: {},\n  icons: {},\n  lang: {},\n  rtl: true,\n  theme: {}\n}\n```\n\n\u003e Notice that passing the Vuetify options directly to Module options is still supported, but it will trigger Nuxt entire rebuild if options are changed.\n\nIf you need to access Nuxt context within the options file, you need to export a function instead :\n\n\n```js\n// vuetify.options.js\nexport default function ({ app }) {\n  return {\n    lang: {\n      t: (key, ...params) =\u003e app.i18n.t(key, params)\n    }\n  }\n}\n```\n\n### `treeShake`\n\n- Type: `Object` or `Boolean`\n- Default: `process.env.NODE_ENV === 'production'`\n\nUses [vuetify-loader](https://github.com/vuetifyjs/vuetify-loader) to enable automatic [tree-shaking](https://vuetifyjs.com/en/customization/a-la-carte).\nEnabled only for production by default.\n\nYou can set object as a set of options to [manually import](https://vuetifyjs.com/en/features/treeshaking/#manually-importing) Vuetify modules globally:\n\n| Key | Type | Value |\n| --- | --- | --- |\n| components | string[] | array of name of Vuetify components to import globally |\n| directives | string[] | array of name of Vuetify directives to import globally |\n| loaderOptions | function | loader option which applies to VuetifyLoaderPlugin |\n| transitions | string[] | array of name of [Vuetify transitions](https://vuetifyjs.com/en/styles/transitions/) to import globally |\n\n## TypeScript\n\nIf you're using TypeScript, you'll need to add `@nuxtjs/vuetify` in your `compilerOptions` of your `tsconfig.json` :\n\n```json\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"@types/node\",\n      \"@nuxt/vue-app\",\n      \"@nuxtjs/vuetify\"\n    ]\n  }\n}\n```\n\nYou'll then be able to have autocompletion in Context (`ctx.$vuetify`) and Vue instances (`this.$vuetify`).\n\n## Offline applications\n\nIf you're building an application that will need to work offline (more likely a [**PWA**](https://pwa.nuxtjs.org/)), you will need to bundle your fonts and icons in your app instead of using online resources.\n\nIt means you must set [`defaultAssets`](#defaultAssets) option to `false`.\n\nFor fonts, you may leverage CSS [**@font-face**](https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp) rule with local path of your fonts. You may find the [google webfonts helper](https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin) site useful for generating **@font-face** rules and sourcing replacement files for the default CDNs.\n\nFor icons, you can either use the same way than above, or leverage tree-shaken SVG libraries like [**Material Design Icons SVG**](https://github.com/Templarian/MaterialDesign-JS) or [**Font Awesome 5 SVG**](https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core).\n\n## Migration Guide from Vuetify 1.5.x\n\nYou'll find a step by step guide to upgrade from 1.5.x to 2.x [here](./MIGRATION_GUIDE.md)\n\n## Development\n\n- Clone this repository\n- Install dependencies using `yarn install` or `npm install`\n- Start development server using `yarn dev` or `npm run dev`\n\n## License\n\n[MIT License](./LICENSE)\n\nCopyright (c) Nuxt Community\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-community%2Fvuetify-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxt-community%2Fvuetify-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-community%2Fvuetify-module/lists"}