Support Vue v2.x / Nuxt v2.x

[liyasthomas]

I tried to install litepie-datepicker in my Nuxt 2.x project which has Vue v2.x under the hood and having some issues. Even though I was able to add litepie-datepicker as a plugin - it's throwing errors such as:

litepie-datepicker.esm.js?8527:119 Uncaught TypeError: Object(...) is not a function
    at eval (litepie-datepicker.esm.js?8527:119)
    at Module../node_modules/litepie-datepicker/dist/litepie-datepicker.esm.js (app.js:2133)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)
    at eval (litepie-datepicker.js?3366:1)
    at Module../plugins/litepie-datepicker.js (app.js:994)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)
    at eval (index.js:70)
    at Module../.nuxt/index.js (app.js:322)

./node_modules/litepie-datepicker/dist/litepie-datepicker.esm.js 217:86-94"export 'Fragment' was not found in 'vue'

This is my Nuxt.js plugin file:

import Vue from "vue"
import LitepieDatepicker from "litepie-datepicker"

Vue.use(LitepieDatepicker)

[kenhyuwa]

Litepie Datepicker only support Vue 3 so, Nuxt v2.* still use Vue 2 you can using alternatif of Litepie Datepicker for Vue 2 https://www.npmjs.com/package/vue2-litepie-datepicker

[liyasthomas]

Awesome. Never knew this existed. Awesome project - looking forward to playing with it.

[zemna]

I think, It would be better if you add information about Vue3 and vue2 product link in this project description or in the README.md file. Thank you for great project

[productdevbook]

 <div class="w-full max-w-md">
                    <litepie-datepicker as-single v-model="storePublishDate"></litepie-datepicker>
</div>

what is problem ?

[BennaceurHichem]

@kenhyuwa I tried all this by installing the vue2 version but it still doesn't work due to the ref used from the composition API, would please give us a basic example of Datepicker that works with Nuxt v2.x and Vue 2 ? I checked all the issues and there is no example for that especially because the examples in the Vue npm package is are the same as the Vue 3 DatePicker

[kenhyuwa]

@kenhyuwa I tried all this by installing the vue2 version but it still doesn't work due to the ref used from the composition API, would please give us a basic example of Datepicker that works with Nuxt v2.x and Vue 2 ? I checked all the issues and there is no example for that especially because the examples in the Vue npm package is are the same as the Vue 3 DatePicker

tried with API

[BennaceurHichem]

@kenhyuwa I tried to change the ref of the composition-api with the reqRef of the @nuxt/composition API but it's deprecated, if you have a concrete working example please let me know

[khawarizmus]

Hello @kenhyuwa trying the project you suggested along with nuxtjs/composition-api with the following tailwind.config.js

const path = require('path');
const colors = require('tailwindcss/colors');

module.exports = {
  mode: 'jit',
  purge: {
    content: [
      path.resolve(__dirname, './node_modules/vue2-litepie-datepicker/**/*.js'),
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
      // TypeScript
      'plugins/**/*.ts',
      'nuxt.config.ts',
      'formulate.config.js',
    ],
    safelist: ['focus:ring-green-500', 'focus:ring', 'outline-none'],
  },
  important: true,
  // https://color-mode.nuxtjs.org/#tailwind-v2
  darkMode: 'class', // false or 'media' or 'class'
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      8: '8px',
    },
    extend: {
      colors: {
        orange: colors.orange,
        primary: '#8D57A3',
        secondary: '#DD4799',
        trinary: '#50C0AB',
        accent: '#49B3E6',
        error: '#ff7285',
        textPrimary: '#212125',
        textSecondary: '#909399',
        'litepie-primary': colors.lightBlue, // color system for light mode
        'litepie-secondary': colors.coolGray, // color system for dark mode
      },
    },
  },
  variants: {
    extend: {
      cursor: ['disabled'],
      textOpacity: ['disabled'],
      textColor: ['disabled'],
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // require('@tailwindcss/forms')
  ],
};

Notice the purge is slightly different as I am targetting the vue2 package

With all that said the styling is completely broken and all i see in the screen is this

Also the Vue2 package by @vinayakkulkarni doesn't have a proper documentation as it seems that it's a copy past of this project. I would appreciate it if I can get some guidelines from you guys

@kenhyuwa @vinayakkulkarni and if @liyasthomas got it to work

[kenhyuwa]

solutions dont use jit mode, use ssrRef instead reqRef, please check documentation of @nuxtjs/composition-api. for now, this some trick for this issues. maybe I'll fix for Litepie Datepicker.

[BennaceurHichem]

@kenhyuwa thanks for your response, I tried to do the exact same thing, disabling the jit mode and replacing reqRef with ssrRef, and nothing change in my case, taking into consideration that the majority of the style works for me except one thing which the initial hide of the years and months block initially like this image shows

the problem is that there is a flex display applied that made thedisplay:noneapplied for each block based on the user click not valid

display: none not applied

if there is any thoughts about this please let me know because I think that this is the problem and that this is not related to jit

[BennaceurHichem]

@kenhyuwa any updates, sir?

[mfreeman451]

Why was this closed? Seems like the issue is still there..

[vinayakkulkarni]

Hello @kenhyuwa trying the project you suggested along with nuxtjs/composition-api with the following tailwind.config.js

const path = require('path');
const colors = require('tailwindcss/colors');

module.exports = {
  mode: 'jit',
  purge: {
    content: [
      path.resolve(__dirname, './node_modules/vue2-litepie-datepicker/**/*.js'),
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
      // TypeScript
      'plugins/**/*.ts',
      'nuxt.config.ts',
      'formulate.config.js',
    ],
    safelist: ['focus:ring-green-500', 'focus:ring', 'outline-none'],
  },
  important: true,
  // https://color-mode.nuxtjs.org/#tailwind-v2
  darkMode: 'class', // false or 'media' or 'class'
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      8: '8px',
    },
    extend: {
      colors: {
        orange: colors.orange,
        primary: '#8D57A3',
        secondary: '#DD4799',
        trinary: '#50C0AB',
        accent: '#49B3E6',
        error: '#ff7285',
        textPrimary: '#212125',
        textSecondary: '#909399',
        'litepie-primary': colors.lightBlue, // color system for light mode
        'litepie-secondary': colors.coolGray, // color system for dark mode
      },
    },
  },
  variants: {
    extend: {
      cursor: ['disabled'],
      textOpacity: ['disabled'],
      textColor: ['disabled'],
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // require('@tailwindcss/forms')
  ],
};

Notice the purge is slightly different as I am targetting the vue2 package

With all that said the styling is completely broken and all i see in the screen is this

Also the Vue2 package by @vinayakkulkarni doesn't have a proper documentation as it seems that it's a copy past of this project. I would appreciate it if I can get some guidelines from you guys

@kenhyuwa @vinayakkulkarni and if @liyasthomas got it to work

I plan to update the docs for Vue 2 version!