@ec-nordbund/vuetify-module
v0.4.3
Published
1. Add `@ec-nordbund/vuetify-module` dependency and `vuetify` to your project
Downloads
121
Readme
Vuetify 2 module for Nuxt.js Inspired by https://github.com/nuxt-community/vuetify-module/
Setup
- Add
@ec-nordbund/vuetify-module
dependency andvuetify
to your project
yarn add --dev @ec-nordbund/vuetify-module vuetify # or npm install --save-dev @ec-nordbund/vuetify-module vuetify
- Add
@ec-nordbund/vuetify-module
to thebuildModules
section ofnuxt.config.js
{
buildModules: [
// Simple usage
'@ec-nordbund/vuetify-module',
// With options
['@ec-nordbund/vuetify-module', { /* module options */ }]
]
}
This module is only tested for nuxt 2.15
Using top level options
{
buildModules: [
'@ec-nordbund/vuetify-module'
],
vuetify: {
/* module options */
}
}
Options
All options of Vuetify can be set.
Additional the following options can be used.
customVariables
- Type:
string[]
- Default:
[]
Provide a way to customize Vuetify SASS variables.
Usage example :
// assets/variables.scss
// Variables you want to modify
$btn-border-radius: 0px;
// If you need to extend Vuetify SASS lists
$material-light: ( cards: blue );
// nuxt.config.js
export default {
vuetify: {
customVariables: ['~/assets/variables.scss']
}
}
The list of customizable variables can be found by looking at the files here.
iconInjector
- Type:
false | {icons: { [name: string]: string }, components: { [name: string]: string[] }}
- Default:
{icons: {}, components: {}}
I (@mathe42) wrote a vue-template-compiler plugins that analyses the AST of your template and replaces all mdi-*
strings with the corosponding svg path.
But there are some limitations:
It is only enabled in the following cases:
v-icon
<v-icon>mdi-*</v-icon>
<v-icon v-html="mdi-*"></v-icon>
<v-icon v-text="mdi-*"></v-icon>
<v-icon>{{ a ? 'mdi-*' : 'mdi-*' }}</v-icon>
Basic js-expressions are allowed (see below)!
in props
<v-some-compnent icon="mdi-*"></v-some-compnent>
<v-some-compnent :icon="'mdi-*'"></v-some-compnent>
<v-some-compnent v-bind:icon="'mdi-*'"></v-some-compnent>
<v-some-compnent :icon="a ? 'mdi-*' : 'mdi-*'"></v-some-compnent>
<v-some-compnent v-bind:icon="a ? 'mdi-*' : 'mdi-*'"></v-some-compnent>
Basic js-expressions are allowed (see below)! For a prop to be checked it has to be registered all (as far as I know) vuetify specific props are registered. For the full list you can look here: https://github.com/EC-Nordbund/vuetify-icon-injector/blob/dev/src/vuetifyIconProps.ts
If some prop is missing please create a issue there.
You can add your own components to the list. If you want your compoenent my-component
to be registered with the props my-prop-a
and my-prop-b
you can set the components option to {components: {'my-component': ['my-prop-a', 'my-prop-b']}}
. So it is quite simple.
Basic js-expressions
As long as the complete 'mdi-*' strings stay together you can write ANY js code in the props! So dont join your icon names together use the full icon names.
own icons
Also you can add your custom svg icons. The icon has to be a SINGLE path. You can give it any name. USE A DIFFERENT PREFIX then mdi! So is your path abc
and you want your icon to be called my-cool-icon
set the icon option to {icons: {'my-cool-icon': abc}}
.
Limitations
This tool does not look at your scripts in your SFCs so if you want to use the icons there import them from @mdi/js one by one!
iconFont
- Type:
'mdi', 'md', 'fa' 'fa4'
- Default:
undefined
Load one of the predefined iconFonts into your page.
If you don't want to use mdi
as iconFont disable iconInjector
and specify the iconFont
.
If you want to use mdi
please consider useing the default enabled iconInjector
wich can 'treeshake' the font. But be aware of the limitations of that useage.
font
- Type:
string | { family?: string | string[], size?: number }
- Default:
undefined
Set a google-web-font and a font-size as default. If nuxt-webfontloader is installed it uses it to load it. Otherwise it justs add a link to the corresponding stylesheet.
It is recomended to NOT use this option. Just serve a copy of the font with your webpage. This results in better loadtime!
TypeScript
If you're using TypeScript, you'll need to add @ec-nordbund/vuetify-module
in your compilerOptions
of your tsconfig.json
:
{
"compilerOptions": {
"types": [
"@types/node",
"@nuxt/vue-app",
"@ec-nordbund/vuetify-module"
]
}
}
You'll then be able to have autocompletion in Context (ctx.$vuetify
) and Vue instances (this.$vuetify
).
Development
- Clone this repository
- Install dependencies using
yarn
License
Copyright (c) S. Krüger