not working as should under vuetify 2.0.5

[jappyjan]

after upgrading to vuetify 2.0.5, the stylings are wrong.

all toasts have black background no matter what options will be passed. also the font is Arial instead of roboto.

toast call:

app.$toast(
    app.$t(error.message) as string,
    {
        color: 'error',
        icon: 'error',
    },
);

[eolant]

@jappyjan hi there, there was an issue like this already. Most likely something is wrong with your set up. Make sure you update library's version to the latest one and you init Vuetify 2 the new way: check out this sandbox

[jappyjan]

I did use the official upgrade guide from vuetify 2.

I create a vuetify instance inside my vuetify-plugin file.

And will put this instance inside main.js into my Vue constructor.

New Vue({ vuetify })

Hat I'm not doing is using Vue.use(Vuetify) Do I have to do this?

[eolant]

@jappyjan you do, check out official Vuetify documentation

[jappyjan]

im sorry. i was wrong. i actually do it the mentioned way.

//plugins/vuetify.ts

import Vue from 'vue';
import Vuetify, {VSnackbar, VIcon} from 'vuetify/lib';
import de from 'vuetify/src/locale/de';

Vue.use(Vuetify, {
    components: {
        VSnackbar,
        VIcon,
    },
});

export default new Vuetify({
    theme: {
        themes: {
            light: {
                primary: '#2097fc',
                secondary: '#1DE9B6',
                accent: '#82B1FF',
                error: '#FF5252',
                info: '#2196F3',
                success: '#4CAF50',
                warning: '#FFC107',
            },
        },
    },
    lang: {
        locales: { de },
        current: 'de',
    },
    icons: {
        iconfont: 'md',
    },
});

// main.ts

import Vue from 'vue';
import vuetify from './plugins/vuetify';
import router from './router';
import store from './store';
import i18n from './i18n';
import 'roboto-fontface/css/roboto/roboto-fontface.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import VuetifyToast from 'vuetify-toast-snackbar';

Vue.use(VuetifyToast, {
    x: 'right', // default
    y: 'bottom', // default
    color: 'info', // default
    icon: 'info',
    classes: [
        'body-2',
    ],
    timeout: 3000, // default
    dismissable: true, // default
    autoHeight: true, // default
    multiLine: true, // default
    vertical: false, // default
    queueable: true, // default
    shorts: {
        custom: {
            color: 'purple',
        },
    },
});

const app = new Vue({
    router,
    store,
    i18n,
    vuetify,
    render: (h) => h(App),
});

[eolant]

@jappyjan I don't see you doing:

Vue.use(VuetifyToast)

[jappyjan]

ah dammit copied VuetifyConfirm instead... :D will update my last comment with the right snippet...

[eolant]

@jappyjan are you using the latest version of this library?

[jappyjan]

oh man... that's been it...

sorry for all of this... next time i'll check version first -.-