I need to change the icons in the datepicker I am using in a vue component.
Here the link: https://www.npmjs.com/package/vue-bootstrap-datetimepicker
In my main.js I have (the relevant parts):
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css'
import datePicker from 'vue-bootstrap-datetimepicker'
import '#/icons' // icon
Vue.use(BootstrapVue)
Vue.use(datePicker)
Vue.use(require('vue-moment'))
This import '#/icons' is for my own folder containing the svg code for each icon. It is working fine all over the app.
Following in the code (still main.js):
jquery.extend(true, jquery.fn.datetimepicker.defaults, {
icons: {
time: '<svg-icon icon-class="plus-circle" class="plus" />',
date: 'tools',
up: 'run',
down: 'pdf',
previous: 'tree',
next: 'user',
today: 'form',
clear: 'table',
close: 'eye'
}
})
I've changed the default icons with my own (just with their names -random, as I normally do in the rest of the app, or with the html tag), but it doesn't work.
Also, this part is not really clear to me jquery.fn.datetimepicker.defaults,. Following the imports I should use datePicker, but if I do it, the console says it is not defined.
So I actually don't know for sure if the problem is using my own icons, or if I am doing something wrong somewhere else in the code.
Following the docs, in my vue.config file I've added this code
// plugin date time picker
config
.plugin('provide')
.use(require('webpack').ProvidePlugin, [{
Vue: ['vue/dist/vue.esm.js', 'default'],
$: 'jquery',
moment: 'moment',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}])
inside the chainWebpack(config).
In the vue template where I use the datetimepicker component I have:
<script>
// Import required dependencies
import 'bootstrap/dist/css/bootstrap.css'
// Import this component
import datePicker from 'vue-bootstrap-datetimepicker'
// Import date picker css
import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css'
export default {
name: 'NewActivity',
components: {
datePicker
},
data() {
return {
date: null,
options: {
format: 'DD/MM/YYYY HH:mm:ss',
locale: 'it',
useCurrent: false,
showClear: true,
showClose: true
}
}
}
}
</script>
I tried leaving the default ones, using glyphicons, using fontawsome and changing their names according to the last release but I never seen any icon showing.
Hope someone can help.
Thanks a lot.
x
Related
I would like to use my custom svg as a v-icon but I don't find any solutions in the Vuetify v3 documentation.
In the vuetify v2, I can do this kind of things in my vuetify.js:
export default new Vuetify({
icons:{
values: {
test: {
component: Test,
},
And I can use this like this:
<v-icon size="40">$vuetify.icons.test</v-icon>
How I can do the same thing in Vuetify v3 ? Thanks for your help :)
Below code shows an example of adding a custom icon along with the mdi set of icons to Vuetify and using both in a component via aliases.
vuetify.js
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
import folder from '#/customIcons/folderIcon.vue'
const aliasesCustom = {
...aliases,
folder,
}
export const vuetify = createVuetify({
icons: {
defaultSet: 'mdi',
aliases: {
...aliasesCustom
},
sets: {
mdi,
},
},
})
folderIcon.vue (your custom icon)
<template>
<svg>...</svg>
</template>
any SFC
<template>
<v-icon>$folder</v-icon>
<v-icon>$mdiGithub</v-icon>
</template>
Original source: this thread in the Vuetify discord channel
I am using Nuxt 3 and I want to import vuetify.
I've successfully imported vuetify and I can use the componetns of vuetify. And everythinh is working fine, but I am getting a warning and don't know how to fix it
I've added vuetify as a plugin.
This is the warning:
[nuxt] #imports should be transformed with real imports. There seems to be something wrong with the imports plugin.
This is my nuxt.config.ts
export default defineNuxtConfig({
css: [
'vuetify/lib/styles/main.sass'
],
build: {
transpile: [
'vuetify'
]
}
})
And my plugins/vuetify.ts
import {defineNuxtPlugin} from "#app";
import {createVuetify} from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
components,
directives
})
nuxtApp.vueApp.use(vuetify)
})
From here, it looks like you also need to set the following
const vuetify = createVuetify({
ssr: true,
})
Using Full Calendar in Vue3 Composition. When using the calendar component in quasar dialog, the initial rendering is incorrect, but after going to the prev/next month, the render turns out fine.
<template>
<FullCalendar :options="calendar" />
</template>
<script setup lang="ts">
import '#fullcalendar/core/vdom'; // solves problem with Vite
import FullCalendar, { CalendarOptions } from '#fullcalendar/vue3';
import dayGridPlugin from '#fullcalendar/daygrid';
import interactionPlugin from '#fullcalendar/interaction';
import { ref } from 'vue';
const calendar = ref<CalendarOptions>({
plugins: [dayGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
buttonText: {
today: 'Today',
},
events: currentEvents,
displayEventTime: false,
});
Please assist me on this.
Apparently you have use dispatchEvent to resize the window when onMounted, however this solution will have a certain delay once the calendar is loaded in.
onMounted(() => {
setTimeout(function () {
window.dispatchEvent(new Event('resize'));
}, 1);
});
I'm developing a Vue app with Vuetify and also document the components with Storybook.
I'm writing the stories nicely, all components seem to show up in Storybook (like my custom components & the Vuetify components too). Except for VIcon.
I have a component that uses Vuetify's VIcon, and I couldn't get the icon to show up (in the real app there's no problem with that).
The setup:
src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdiSvg',
}
});
.storybook/vuetify_storybook.js
import Vue from 'vue';
import Vuetify from 'vuetify'; // loads all components
import 'vuetify/dist/vuetify.min.css'; // all the css for components
import config from '#/plugins/vuetify'; // basic config with theme
Vue.use(Vuetify);
export default new Vuetify(config);
.storybook/preview.js
import { addDecorator } from '#storybook/vue';
import vuetify from './vuetify_storybook';
addDecorator(() => ({
vuetify,
template: `
<v-app>
<story />
</v-app>
`,
}));
.storybook/main.js
const path = require('path');
module.exports = {
stories: [
'../stories/**/*.stories.js',
'../src/**/*.stories.js'
],
addons: [
'#storybook/addon-actions',
'#storybook/addon-links',
'#storybook/addon-knobs',
'#storybook/addon-storysource'
],
webpackFinal: async (config, { configType }) => {
config.resolve.extensions.push('.vue', '.css', '.less', '.scss', '.sass', '.html')
// Use Sass loader for vuetify components
config.module.rules.push({
test: /\.sass$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
config.module.rules.push({
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
additionalData: "#import '#/styles/variables.scss';"
}
}
],
});
config.module.rules.push({
resolve: {
alias: {
'#': path.resolve(__dirname, '../src'),
vue: 'vue/dist/vue.js',
'vue$': 'vue/dist/vue.esm.js',
},
},
});
// Return the altered config
return config;
},
};
CustomVIcon.stories.js
import { withKnobs } from '#storybook/addon-knobs'
export default {
title: 'Display that icon',
decorators: [withKnobs]
}
export const displayIcon = () => {
return {
template: `<v-icon>mdi-alert</v-icon>`
}
}
If I add a text that is not an mdi icon (like <v-icon>notmditext</v-icon>, then the text is displayed - but as soon as I add a - (dash/minus sign) to the string, it doesn't show up.
I can see the icon's HTML (well, part of it) in the console, only the ::before part is missing (that should be the actual icon). So styles are set, classes are added, etc when I inspect the Storybook page (where the icon should be).
Already tried adding https://www.npmjs.com/package/storybook-addon-jsx (as in the real case the component is rendered with JSX), nothing changed (no v-icon)
Already tried putting other components in the story (like VCard), and they showed up (and other stories work just perfectly)
Vue is 2.6.12, Vuetify 2.3.10, #storybook/vue 6.0.21 - so quite fresh
Also tried to import components from vuetify/lib (and not just vuetify) in the .storybook/vuetify_storybook.js & registering them locally (in the preview.js and the story file - no change)
OK, just needed another view on the things:
removed the link to the Material design icons CDN:
// remove this from public/index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
changed the package from #mdi/js to #mdi/font
npm remove #mdi/js
npm install #mdi/font -D
imported the corresponding CSS in two places:
// add this to src/main.js & .storybook/vuetify_storybook.js
import '#mdi/font/css/materialdesignicons.css';
changed the Vuetify config
// in src/plugins/vuetify.js
icons: {
// iconfont: 'mdiSvg', // change this
iconfont: 'mdi', // to this
},
AND VOILÁ! VIcon shows up.
So, the problem was that I thought everything had been set up correctly, but it wasn't the case: the icons in the app were coming from the CDN (have not looked at the Network tab), and when I removed the CDN link from the index.html it immediately became apparent.
More on setting up the icons in Vuetify: Install Material Design Icons
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
},
},
})