vue-tailwind-picker
vue-tailwind-picker copied to clipboard
Not rendering properly in Nuxt production
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.
My nuxt.config.js
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: {
}
}
My v.tailwind.picker.js plugin file:
import Vue from 'vue'
import VueTailwindPicker from 'vue-tailwind-picker'
Vue.use(VueTailwindPicker)
Also the rendered component
<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>
I have had the same issue in production. I have tinkered with the purge setting of TailwindCSS but with no solution. Did you find a solution to this problem?
I have had the same issue in production. I have tinkered with the purge setting of TailwindCSS but with no solution. Did you find a solution to this problem?
No. I used another package for the task instead.
For anyone still looking for a solution, you should add the path to this module directory to the purge array in tailwind.config.js in your Nuxt root directory 👍
Can you please share the solution @mathieumagalhaes?
Sure @vinayakkulkarni, I used this purge configuration in tailwind.config.js
purge: {
enabled: process.env.NODE_ENV !== 'development',
content: [
'./static/**/*.html',
'./components/**/*.vue',
'./components/**/*.html',
'./layouts/**/*.vue',
'./layouts/**/*.html',
'./pages/**/*.vue',
'./pages/**/*.html',
path.resolve(
__dirname,
'./node_modules/vue-tailwind-picker/dist/*.js'
),
path.resolve(__dirname, './node_modules/vue-tailwind-picker/**/*.js'),
],
},
Sure @vinayakkulkarni, I used this purge configuration in tailwind.config.js
purge: { enabled: process.env.NODE_ENV !== 'development', content: [ './static/**/*.html', './components/**/*.vue', './components/**/*.html', './layouts/**/*.vue', './layouts/**/*.html', './pages/**/*.vue', './pages/**/*.html', path.resolve( __dirname, './node_modules/vue-tailwind-picker/dist/*.js' ), path.resolve(__dirname, './node_modules/vue-tailwind-picker/**/*.js'), ], },
I'll take a look at your solution and let you know if it's working for me or not.