How to use with Nuxt?

[baxeico]

Hi, I'm trying to use your component in a Nuxt.js (version 2) project. In one of my Nuxt pages I import the component like this:

<script>
import DateRangePicker, { presets } from '@nerd305/vuetify-date-range-picker'

export default {
  components: {
    DateRangePicker
  },
  data: () => ({
    date_picker_configuration: {
      dark: false,
      dateFormat: 'DD/MM/YYYY',
      dateStart: presets.LAST_30_DAYS[0],
      dateUntil: presets.LAST_30_DAYS[1],
      primaryPreset: presets.LAST_30_DAYS
    }
  }),
  methods: {
    setDateRange () {
      console.log('date range!!!!')
    }
  }
</script>

then I use the component in my page template like this:

 <date-range-picker :config="date_picker_configuration" @change="setDateRange" />

But the component do not show up and an error message is shown in the Javascript console:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <DateRangePicker>

the error comes from vue.runtime.esm.js. Do you have a working example of your component with Nuxt.js?

Thank you very much for your help!

[markhilton]

Currently this package integrates with the application by registering the component globally. So you would have to import the package in your main.js file and initialize it with Vue.use() there:

import DateRangePicker from "@nerd305/vuetify-date-range-picker";
const config = {
  debug: true,
  store,
};
Vue.use(DateRangePicker, config);

Keep in mind it also expects VueX and Vuetify packages to be already integrated with your app, so the VUE instance is initialized with store and vuetify variables as well.

new Vue({
  store,
  vuetify,
  render: h => h(App)
}).$mount("#app");

If you do not use the VueX store with your app, you still will have to add the vuex package, initialize an empty store and pass it on to Vue.use with the config, as on above example. Here's how an empty store init would look like.

const store = new Vuex.Store({});

This is my current integration scenario, so I can access its mutations and state via VueX. With this integration the package will register new namespace within VueX called datepicker and expose its state and mutations there. Hope that helps...

[baxeico]

Thank you. You pointed me in the right direction! ;)