I recently updated vuetify from older version(1.2.8) to new version(1.3.2) and importing components by A La carte. It looks like below.
import Vue from 'vue';
import Vuetify, {
VApp, // required
VNavigationDrawer,
VGrid,
VFooter,
VToolbar,
transitions
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'
Vue.use(Vuetify, {
components: {
VApp,
VNavigationDrawer,
VFooter,
VToolbar,
VGrid,
transitions
},
directives: {
Ripple
}
});
I did same exactly like how documentation suggested. But I was getting the issue with VGrid and transitions while production build time. Because of this my layout breaking. can anyone help me on this.
Error :
I looked into the vuetify library, the code seems correct not sure why it's not working. Finally, what I did, I imported as like below only VGrid and Transitions components. Now it's working.
import VGrid from 'vuetify/lib/components/VGrid/';
import transitions from 'vuetify/lib/components/transitions/';
Related
How to import custom svg icon in Vuex (using Vuetify and Nuxt.js)
in Vuetify.options:
icons: {
values: {
myIcon: {
component: awesomeIcon
}
}
}
According to the docs here You would import the icon in the config file (for vuetify) and add it to the vuetify bootstrap as you did. Although you would need to have a default for all icons as shown in the docs above.
Basically should look something like this:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import myImportedIcon from 'someplace'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'fa',
values: {
myIcon: myImportedIcon
},
},
})
I'm facing an issue with the icons in Vuetify not showing properly, for example below is the Vuetify expansion panel. I already tried the solutions in this question vuetify icon not showing, but they didn't work for me. You can see below that the chevron-down icon is showing as $vuetify.icons.expand. I've tried both importing #mdi/font which doesn't do anything for me... here's the code I'm using:
import Vue from 'vue'
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
// import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '#mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify, {
icons: {
iconfont: 'mdi'
}
});
//expansion panels
Importing material-design-icons-iconfont/dist/material-design-icons.css, changes the icons into some weird icons.
Please let me know what could be the problem and what else I can try!
Assuming you're using Vuetify 2...
I think the key thing you're missing is passing Vuetify to the Vue constructor, as described here:
https://vuetifyjs.com/en/getting-started/quick-start#bootstrapping-the-vuetify-object
Like this:
new Vue({
vuetify: new Vuetify(),
// ... all the other stuff you're currently passing
If you want to configure the font then you need to pass it to the Vuetify constructor, not Vue.use. e.g.
const vuetify = new Vuetify({
icons: {
iconfont: 'mdi'
}
})
new Vue({
vuetify,
// ... all the other stuff you're currently passing
mdi is the default icon set anyway, so you don't need to do this if you want to use that font.
The way you're importing the CSS appears to be correct. You should be seeing errors if you haven't done that right.
The current documentation is here: https://vuetifyjs.com/en/customization/icons. At the time of writing that's for version 2.1.0. Be very careful not to confuse the configuration required for Vuetify 2 with 1.5, they are significantly different despite some similarities. You also need to be clear that there are two fonts with very similar names, one configured using iconfont: 'mdi' and one with iconfont: 'md'. Both use the words 'Material', 'Design' and 'Icons' in their names depending on the context.
EDIT by OP
I can't put this in a comment, so I figured I'd edit the answer. This is what ended up working for me:
// src/plugins/vuetify.ts
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css';
import '#mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify);
const vuetify = new Vuetify({
icons: {
iconfont: 'mdi'
}
});
export default vuetify
Then in my other file where I use Vue:
// other_file.ts
import vuetify from './plugins/vuetify';
new Vue({
vuetify,
// ...other stuff...
})
(Vue version - 2, Vuetify and Storybook - latest)
Consider the following simple button component:
<template>
<v-btn round
color="primary">
<slot></slot>
</v-btn>
</template>
<script>
export default {
name: "test-button",
}
</script>
In the App component file, it is invoked like this:
<v-app>
<v-layout column justify-center>
<v-layout row justify-center align-center>
<test-button #click="testBtnClicked">
Click It
</test-button>
</v-layout>
</v-layout>
</v-app>
And the Vuetify setup looks like this in the main.js:
import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from "vuetify";
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
theme: {
primary: colors.indigo.base,
info: colors.blue.lighten2,
accent: colors.green.lighten1,
error: colors.red.darken2
}
});
So far, so good - I get a nice indigo button in the middle of the frame, which is what I would expect.
Now, in the Storybook config, I'm using the same lines as in main.js to set up Vuetify, and my Storybook file looks like this:
import { storiesOf } from "#storybook/vue";
import TestButton from "./TestButton.vue";
storiesOf("TestButton", module)
.add("button template", () => ({
template: '<test-button :rounded="true">round</test-button>',
components: {TestButton}
}))
This renders the button in Storybook, but the theme settings don't happen, to wit: the button is not indigo, it is white. The rest of the Vuetify attributes seem to be fine - it looks like a Vuetify rounded button, with white text.
I'm not sure if this is a Vuetify issue or a Vue issue or a Storybook issue (or a user-error issue on my part). If anyone has done this, I'd appreciate some insight.
Here's my webpack.config.js (in .storybook):
module.exports = (baseConfig, env, defaultConfig) => {
defaultConfig.plugins.push(new VueLoaderPlugin());
return defaultConfig;
};
I have the problem too.
After reading vuetify's code, seems the generation of CSS, and injection of the theme is made in the VApp mixin app-theme located here.
So, I think the problem is not linked to storybook, but vuetify instead.
By wrapping the component I wish to test with a v-app, it's ok.
So, for now, please try to add a decorator in your config.js like this :
import { configure, addDecorator } from '#storybook/vue';
import 'vuetify/dist/vuetify.css';
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify, {
theme: {
// your colors
},
});
addDecorator(() => ({
template: '<v-app><story/></v-app>',
}));
...
Sounds ok for you ?
(answer too on github : https://github.com/storybooks/storybook/issues/4256#issuecomment-440065778)
I ran into the issue a few months ago so its the not freshest in my mind. You need to import the plugin that adds Vuetify to Vue. Here is the config.js file in my .storybook folder.
// #### /.storybook/config.js
import { configure } from '#storybook/vue';
import Vue from 'vue';
import Vuex from 'vuex'; // Vue plugins
import '#/plugins/allPlugins';
// Install Vue plugins.
Vue.use(Vuex);
const req = require.context('../src', true, /\.stories\.js$/)
function loadStories() {
req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);
plugins/allPlugins
import Vue from 'vue'; // <---- important
import './vuetify'; // <---- important
import WebCam from 'vue-web-cam';
import Chat from '#/libs/vue-beautiful-chat/index';
import './styles';
import './ellipsis';
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
Vue.use(WebCam);
Vue.use(Chat);
Vue.use(Viewer);
plugins/vuetify
import Vue from 'vue';
import {
Vuetify,
VApp,
...
} from 'vuetify';
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
components: {
VApp,
...
},
theme: {
primary: colors.blue.lighten1,
...
},
});
The reason I separated out all plugins was because of custom styles and other plugins that I was more control of when importing. If you need custom styles you will need to import both Vuetify plugin and custom styles.
Hopefully someone will know where I have gone wrong here - I'm trying to implement the Font Awesome package with Vuetify. Font Awesome is all imported and ready to go (setup is indentical to projects which I have Font Awesome successfully integrated):
My bare basics main.js file:
import '#babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import store from './store'
import './registerServiceWorker'
import { library } from '#fortawesome/fontawesome-svg-core'
import { faCode } from '#fortawesome/pro-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
library.add(faCode)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
And within a component I am referencing an icon as follows:
My Component.vue:
<template>
...
<v-btn>
<v-icon>fas fa-code</v-icon>
</v-btn>
...
</template>
^ Where I have left out superfluous code*.
So, my question is - how do we integrate Font Awesome within Vuetify's v-icon component?
For reference, I’m using what is outlined here:
https://vuetifyjs.com/en/components/icons
Which is identical to what I have prescribed above, but sadly my icon does not display...
Update: I specifically want a solution which doesn't include adding the rather heavy Font Awesome all.css file (<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">) - instead importing on an icon by icon need. (the overall weight of the minified all.css file is 52kb in v.5.2.0.
You can use tree shaking.
Since you are looking for an option to avoid loading all icons into vue/vuetify, I suggest that you utilize the tree shaking method and add each icon you want to use, manually. This can be a bit tedious but adding in icons on demand will be beneficial in the long term - as webpack will just bundle up the ones you specify.
Please note:
In this tutorial, I assume that the reader has the Pro package. If you only want to use the free ones just remove anything resembling pro from the mix
Below you can see my preferred way of doing this with vuetify and using SVGs with v-icon and v-text/v-html:
First we have to install the icons:
(open up your terminal/command-prompt inside your project and install)
$ npm i --save #fortawesome/fontawesome-svg-core // this is the svg core, it is needed.
$ npm i --save #fortawesome/vue-fontawesome // Vue integration *
$ npm i --save #fortawesome/free-brands-svg-icons // Branding icons
$ npm i --save #fortawesome/free-regular-svg-icons // only for FA5 free **
$ npm i --save #fortawesome/free-solid-svg-icons // only for FA5 free **
$ npm i --save #fortawesome/pro-regular-svg-icons // Pro icons regular type
$ npm i --save #fortawesome/pro-light-svg-icons // Pro icons light type
$ npm i --save #fortawesome/pro-solid-svg-icons // Pro icons solid type
$ npm i --save #fortawesome/pro-duotone-svg-icons // Pro icons duotone type ***
( * ) The vue integration bundle more info
( ** ) Only needed for free icons, if you own Pro and followed the instructions here, they are are included in pro already.
( *** ) As of writing, the duotone icons are not completely integrated yet, beware of errors.
Then lets add this to our vuetify configuration:
I assume here that you use vuejs with javascript (not typescript) and that you've installed vuetify through vue add vuetify. The vuetify.js file should reside inside the plugins folder in your src folder. Your milage may vary.
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '#fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome' // Integration
// ... there should be more here, but see next part below ...
Vue.component('font-awesome-icon', FontAwesomeIcon) // add it to vue
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'faSvg', // The bees knees, what most people are looking for.
},
});
Ok, now that we've added the main components of FontAwesome 5, let's use treeshaking to instruct which icons we'd like to use for our project. I will only use two icons as examples: fa-plus and fa-user-circle, and I will add them for three of the Font Awesome Pro 5 packages we installed (Light, Regular and Duotone) and then I will add some others (bars and user) for the solid, to see how this can be done in both ways at the same time.
So back to our vuetify.js file, we replace
// ... there should be more here, but see next part below ...
with the following (note camelcase):
// src/plugins/vuetify.js
// ...
import {
faBars,
faUser
} from '#fortawesome/pro-solid-svg-icons'
import {
faPlus as farPlus,
faUserCircle as farUserCircle
} from '#fortawesome/pro-regular-svg-icons'
import {
faPlus as falPlus,
faUserCircle as falUserCircle
} from '#fortawesome/pro-light-svg-icons'
import {
faPlus as fadPlus,
faUserCircle as fadUserCircle
} from '#fortawesome/pro-duotone-svg-icons'
// ...
Quick note: If you still would like to add the entire library of these, you can do that by importing like so: import { far } from '#fortawesome/pro-regular-svg-icons' (for regular) and so on.
As you can see, we've now added fa-plus and fa-user-circle to our project. From here, we need to add them to the library we imported into the vuetify.js config. (don't sweat, the whole file can be seen below in the code snippet.):
// src/plugins/vuetify.js
// ...
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
faBars, faUser,
farPlus, falPlus, fadPlus,
farUserCircle, falUserCircle, fadUserCircle
)
/// ...
Now that we've added them to the library, we need to hand them over to vuetify. Vuetify has some special icons that they use for things like the <v-app-bar-nav-icon></v-app-bar-nav-icon> (hamburger menu). We can customize these, and add our own to the mix (if we'd like). I do this by defining a constant and add all the icons I need in there, like so:
const CUSTOM_ICONS = {
add: { // custom icon I want to use
component: FontAwesomeIcon,
props: {
icon: ['fad', 'plus']
}
},
menu: { // used for the nav-icon by vuetify
component: FontAwesomeIcon,
props: {
icon: ['fas', 'user']
}
}
}
and then we add this constant to the config like so:
export default new Vuetify({
icons: {
iconfont: 'faSvg',
values: CUSTOM_ICONS,
},
});
You could also add them directly into the values variable, but I find it more readable to do it through a constant.
Now we can use these in templates, appends or prepends:
<template>
<v-app>
<!-- reference the whole path -->
<v-icon>$vuetify.icons.add</v-icon>
<!-- but this is easier -->
<v-icon>$add</v-icon>
<v-select
:items="direction"
label="Select direction"
menu-props="auto"
prepend-icon="$unfold" <!-- short version -->
append-icon="$vuetify.icon.unfold" <!-- long version -->
>
</v-select>
</v-app>
</template>
Finally, here is the complete example:
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '#fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome' // Integration
import {
faBars,
faUser
} from '#fortawesome/pro-solid-svg-icons'
import {
faPlus as farPlus,
faUserCircle as farUserCircle
} from '#fortawesome/pro-regular-svg-icons'
import {
faPlus as falPlus,
faUserCircle as falUserCircle
} from '#fortawesome/pro-light-svg-icons'
import {
faPlus as fadPlus,
faUserCircle as fadUserCircle
} from '#fortawesome/pro-duotone-svg-icons'
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
faBars, faUser,
farPlus, falPlus, fadPlus,
farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = {
add: { // custom icon I want to use
component: FontAwesomeIcon,
props: {
icon: ['fad', 'plus']
}
},
menu: { // used for the nav-icon by vuetify
component: FontAwesomeIcon,
props: {
icon: ['fas', 'user']
}
}
}
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'faSvg',
values: CUSTOM_ICONS,
},
});
<template>
<v-app>
<!-- reference the whole path -->
<v-icon>$vuetify.icons.add</v-icon>
<!-- but this is easier -->
<v-icon>$add</v-icon>
<v-select
:items="direction"
label="Select direction"
menu-props="auto"
prepend-icon="$unfold" <!-- short version -->
append-icon="$vuetify.icon.unfold" <!-- long version -->
>
</v-select>
</v-app>
</template>
Suggestion separate files for better reading
We can separate the fontAwesome logic to another file:
So we have 2 files:
the fontAwesome.js where you do all the logic belonging to fontAwesome
the vuetify.js you will import the Icons from fontAwesome.js
// src/plugins/fontAwesome.js
import { library } from '#fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome' // Integration
import {
faBars,
faUser
} from '#fortawesome/pro-solid-svg-icons'
import {
faPlus as farPlus,
faUserCircle as farUserCircle
} from '#fortawesome/pro-regular-svg-icons'
import {
faPlus as falPlus,
faUserCircle as falUserCircle
} from '#fortawesome/pro-light-svg-icons'
import {
faPlus as fadPlus,
faUserCircle as fadUserCircle
} from '#fortawesome/pro-duotone-svg-icons'
library.add(
faBars, faUser,
farPlus, falPlus, fadPlus,
farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = {
add: { // custom icon I want to use
component: FontAwesomeIcon,
props: {
icon: ['fad', 'plus']
}
},
menu: { // used for the nav-icon by vuetify
component: FontAwesomeIcon,
props: {
icon: ['fas', 'user']
}
}
}
export { CUSTOM_ICONS }
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { CUSTOM_ICONS } from "./fontAwesome"
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'faSvg',
values: CUSTOM_ICONS
},
});
<template>
<v-app>
<!-- reference the whole path -->
<v-icon>$vuetify.icons.add</v-icon>
<!-- but this is easier -->
<v-icon>$add</v-icon>
<v-select
:items="direction"
label="Select direction"
menu-props="auto"
prepend-icon="$unfold" <!-- short version -->
append-icon="$vuetify.icon.unfold" <!-- long version -->
>
</v-select>
</v-app>
</template>
Further reading:
Why use Font Awesome with library as a concept?
Vuetify: how to install Font Awesome 5
Using Font Awesome with VueJS
For a Nuxt/Vuetify Project:
Complementing the above answer, you can also set it up in the Vuetify configuration file, that is created during the project installation ( "plugins/vuetify.js" ), adding the "iconfont" prop:
import '#fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'fa'
})
Now, use with the icon component like this:
<v-icon>fab fa-vuejs</v-icon>
A simple solution is posted under framework options in Vuetify: https://vuetifyjs.com/en/framework/icons
Install icons library using NPM or yarn:
npm install #fortawesome/fontawesome-free -D
Config - For a simple vue project
Add this to your main.js
import '#fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'fa'
})
Config - For a nuxt + vuetify project
Create a js file(eg icons.js) under plugins
import '#fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'fa'
})
Add this to your plugins in nuxt.config.js
{ src: '~/plugins/icons.js', ssr:false }
Usage
Now you can access font awesome icons using v-icon or append/prepend in component like:
<v-slider
v-model="energy"
color="red"
label="Energy"
min="1"
max="100"
thumb-label="always"
prepend-icon="fa-burn"
></v-slider>
Ok, so using the above commenter's suggestion, I have managed to get it working by using the standard vue-font-awesome method of including font awesome icon components, swopping <v-icon> out for such that what I used in my question:
<v-btn>
<v-icon>fas fa-code</v-icon>
</v-btn>
...becomes:
<v-btn fab dark small color="black" v-on:click="addCodeBlock">
<font-awesome-icon :icon="['fas', 'code']"/>
</v-btn>
import font-awesome in src/main.js:
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import 'font-awesome/css/font-awesome.css'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
then define iconfont in src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
Vue.use(Vuetify, {
iconfont: 'fa4' // 'md' || 'mdi' || 'fa' || 'fa4'
})
Is there a way to install fontawesome in Vue? I tried few tutorials but they are all useless and do not work or icons are empty or plugin does not render at all!!!! I don't want to import the font by script, I want to install it in my application. I tried this tutorial (https://github.com/FortAwesome/vue-fontawesome) but whatever I did the icons do not render, maybe someone can point me to the solution?
Here is my code but the icons even do not render:
import FontAwesomeIcon from '#fortawesome/vue-fontawesome';
export default {
name: 'App',
components:{FontAwesomeIcon}
}
<template>
<div id="app"><font-awesome-icon icon="spinner" /></div>
</template>
also, I get an error in the console:
Check not find one or more icon(s) {prefix: "fas", iconName:
"spinner"} {}
I think you might be missing some dependencies. Please try
<script>
import fontawesome from "#fortawesome/fontawesome";
import brands from "#fortawesome/fontawesome-free-brands";
// import 1 icon if you just need this one. Otherwise you can import the whole module
import faSpinner from "#fortawesome/fontawesome-free-solid/faSpinner";
import FontAwesomeIcon from "#fortawesome/vue-fontawesome";
fontawesome.library.add(brands, faSpinner);
// or .add(brands, solid) if you need the whole solid style icons library/module
export default {
name: "App",
components: {
FontAwesomeIcon
}
};
</script>
Working example: https://codesandbox.io/s/ov6o0xk23y
Remember to load each icon that you are using. My icons weren't rendering because I forgot to add them to the library.
Template:
<icon icon="lock" />
JS:
import Vue from 'vue';
import { library } from '#fortawesome/fontawesome-svg-core';
import {
// import icons here
faLock,
} from '#fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
import App from './App.vue';
// add icons to library here
library.add(faLock);
Vue.component('icon', FontAwesomeIcon);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
Also, in the case that you are using multiple icons, it can be easier to import and load the whole set of icons e.g.
...
import { fas } from "#fortawesome/free-solid-svg-icons";
library.add(fas);
...
I had the same issue with:
package.json
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/vue-fontawesome": "^2.0.2",
Relying on a previous project where it worked, I upgraded #fortawesome/vue-fontawesome to ^3.0.0-4, which fixed the issue for me.
I was getting the following warning and not getting the icons displayed:
"export 'default' (imported as 'FontAwesomeIcon') was not found in '#fortawesome/vue-fontawesome'
Solution for me was to import an specific portion instead of going to default
changed from:
import FontAwesomeIcon from '#fortawesome/vue-fontawesome'
to
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'