Build for production with Vite?

[seabasss]

Has anyone gotten this package to work when building for production with Vite?

It seems like Vite is using two different methods to build for dev and prod (with rollup) and it only works for dev for me.

Thanks for tips!

[JhumanJ]

Same here! Getting Uncaught TypeError: Vue__default.default.extend is not a function here:

[JhumanJ]

Here's the line: https://github.com/alfonsobries/vue-tailwind/blob/e35d73405862128cb0cf616e0ab3a80128794411/src/base/Component.ts#L38

[infinitodk]

Any news? @alfonsobries

[RA9]

Any news?

[niklaz]

I have solved this issue by installing yarn add @vitejs/plugin-vue2 and adding it in vite.config.js:

 // vite.config.js
import vue from '@vitejs/plugin-vue2'

export default {
  plugins: [vue()]
}

https://github.com/vitejs/vite-plugin-vue2

[infinitodk]

Bit hacky, isn't it?

[niklaz]

Sure, but it worked for me as a quick fix for now. Of course, for vue v.2.7.x.

[ianjamieson]

I have solved this issue by installing yarn add @vitejs/plugin-vue2 and adding it in vite.config.js:

This is what I was expecting to work, but I am still getting the same issue where extend is not a function

[paullexen]

I had this problem and I solved it by adding a plugin to my Vite config that modifies the vue-tailwind code:

Here's the plugin

const modifyVueTailwind = {
    name: 'modifyVueTailwind',
    transform(code, id) {
        if (!/vue-tailwind\/dist\/(vue-tailwind|components)\.js/.test(id)) {
            return
        }

        return code.replace(
            "function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }",
            "function _interopDefaultLegacy (e) { return e && (typeof e === 'object' || typeof e === 'function' ) && 'default' in e ? e : { 'default': e }; }",
        )
    }
}

And then within my plugins array within defineConfig:

plugins: [
    vue(),
    modifyVueTailwind,
    // additional plugins ... 
]

You may need to modify the regex in the transform function based on how you're importing the tailwind library.