0

I'm all new with Nuxt so this might be stupid question.

I have a Nuxt project where I want to use this plugin vue-airbnb-style-datepicker

I fallowed the installation and installed this to my project:

npm install vue-airbnb-style-datepicker --save

npm install date-fns

then in the plugins folder I made a file called vue-airbnb-datepicker.js and added this code inside

import Vue from 'vue'
import AirbnbStyleDatepicker from 'vue-airbnb-style-datepicker'
import 'vue-airbnb-style-datepicker/dist/styles.css'

const datepickerOptions = {}

Vue.use(AirbnbStyleDatepicker, datepickerOptions)

then in the nuxt.config.js I added my plugin

plugins: ['~/plugins/vue-airbnb-datepicker.js'],

After all this when i run my app i got

ReferenceError Element is not defined

I can post the full error message but I do not think that is relevant.

mart cube
  • 633
  • 1
  • 15
  • 30
  • 1
    maybe it's about this plugin `date-fns` ? – Sovalina May 07 '18 at 22:57
  • @sovalina It says in the installation "NB: This plugin is dependant on VueJS 2.x and date-fns (for date manipulation). Make sure you have these dependencies installed." – mart cube May 07 '18 at 23:04
  • Why did you run `npm install date-fns` and not `npm install date-fns --save`? – Schwesi May 09 '18 at 14:42
  • @Schwesi there should not be any difference from using --save. If you are confused about it, try to read this https://stackoverflow.com/questions/19578796/what-is-the-save-option-for-npm-install – mart cube May 09 '18 at 15:05

2 Answers2

2

Probably you need to disable it for server side e.g.

{ src: '~/plugins/vue-airbnb-datepicker.js', ssr: false }
Aldarund
  • 17,312
  • 5
  • 73
  • 104
0

On a hunch:

The folder names in the node_modules/date-fns are like addWeeks and in /node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js, they are imported as e.g import addWeeks from date-fns/add_weeks;

Changing imports might actually help.

Pingolin
  • 3,161
  • 6
  • 25
  • 40
sardar1592
  • 41
  • 2