I have a Nuxt app with vue-tailwind-picker, it's working fine in development mode, the date picker not rendering properly when I upload it to production. I have attached some screenshots to show my issue. Can anyone help me to solve the issue? I am pretty new to Vue and Nuxt community.
export default {
// Disable server side rendering (https://go.nuxtjs.dev/rendering-modes#client-side-rendering-only)
ssr: false,
// Target (https://go.nuxtjs.dev/config-target)
target: 'static',
...
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
// { src: '~/plugins/v-tailwind-picker', mode: "client" }
'~/plugins/v-tailwind-picker',
],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'@nuxtjs/tailwindcss',
],
// Tailwind CSS options
tailwindcss: {
cssPath: '~/assets/css/tailwind.css',
},
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
// https://go.nuxtjs.dev/pwa
// '@nuxtjs/pwa',
// Webfont module
'nuxt-webfontloader',
],
// Loading Nunio
webfontloader: {
google: {
families: ['Nunito:400,600,700,800'] //Loads Nunito with weights 400,600,700,800
}
},
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
}
}
import Vue from 'vue'
import VueTailwindPicker from 'vue-tailwind-picker'
Vue.use(VueTailwindPicker)
<VueTailWindPicker
:init="false"
:theme="{
background: '#1A202C',
text: 'text-white',
border: 'border-gray-700',
currentColor: 'text-gray-200',
navigation: {
background: 'bg-gray-800',
hover: 'hover:bg-gray-700',
focus: 'bg-gray-700',
},
picker: {
rounded: 'rounded-md',
selected: {
background: 'bg-teal-400',
border: 'border-teal-400',
hover: 'hover:border-teal-400',
},
holiday: 'text-red-400',
weekend: 'text-green-400',
event: 'bg-blue-500',
},
event: {
border: 'border-gray-700',
},
}"
@change="(v) => value = v">
<input v-model="value" placeholder="Select Date" class="form-textbox">
</VueTailWindPicker>