Import tailwind custom components

Question

I have this code :

/plugins/t-alert.js :

    import Vue from 'vue'
    import VueTailwind from 'vue-tailwind'
    import TAlert from 'vue-tailwind/dist/t-alert'

    const settings = {
    't-alert': {
        component: TAlert,
        props: {
            fixedClasses: {
                wrapper: 'rounded p-4 flex text-sm border-l-4',
                body: 'flex-grow',
                close: 'ml-4 rounded',
                closeIcon: 'h-5 w-5 fill-current'
            },
            classes: {
                wrapper: 'bg-blue-100 border-blue-500',
                body: 'text-blue-700',
                close: 'text-blue-700 hover:text-blue-500 hover:bg-blue-200',
                closeIcon: 'h-5 w-5 fill-current'
            },
            variants: {
                danger: {
                    wrapper: 'bg-red-100 border-red-500',
                    body: 'text-red-700',
                    close: 'text-red-700 hover:text-red-500 hover:bg-red-200'
                },
            }
        }
      },
     }
     Vue.use(VueTailwind, settings)

In the file : /plugins.index.js :

export * from './t-alert';

In the file main.ts :

    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import "tailwindcss/tailwind.css"
    import './plugins';

    createApp(App).use(store).use(router).mount('#app')

The run is succesfuly done but I have an error in browser : Uncaught TypeError: Vue__default.default.extend is not a function. Have you an idea about that problem ? Thx in advance and sorry for my english.

Import tailwind custom components

0 Answers0