How to use vue2-daterange-picker with Nuxt.js ?

[alamenai]

In Nuxt.js plugins we define our external components and we use them globally across the project, but my nuxt project could not register and display the component.

date-picker.js plugin:

import Vue from "vue";
import DateRangePicker from "vue2-daterange-picker";
import "vue2-daterange-picker/dist/vue2-daterange-picker.css";
Vue.use(DateRangePicker);

nuxt.config.js configuration:

 plugins: [
        "~/plugins/date-picker.js"
    ],

DatePicker.vue component :

<template>
  <div class="callendar">
    <date-range-picker>
      <template
        v-slot:input="picker"
        style="min-width: 350px;"
      >{{ picker.startDate | date }} - {{ picker.endDate | date }}</template>
    </date-range-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

Browser Console :

[Vue warn]: Unknown custom element: <date-range-picker> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <DatePicker> at components/DatePicker.vue
       <Pages/index.vue> at pages/index.vue
         <Nuxt>
           <Layouts/default.vue> at layouts/default.vue
             <Root>

Visual Studio Code hint :

[Kronhyx]

@MenaiAla this work for me

datepicker.js

import Vue from 'vue'
import 'vue2-daterange-picker/dist/vue2-daterange-picker.css'

Vue.component('b-daterange', require('vue2-daterange-picker').default)

[nkostadinov]

Thanks @Kronhyx :)

[jattoabdul]

When I run this in production, The CSS doesn't seem like it compiles, so I get a display without styles. Any idea why?