Broken?

[SephVelut]

I have a single page component and

<template>
 <v-daterange></v-daterange>
</template>

<script>
    import VDateRange from 'vuetify-daterange-picker';
    import 'vuetify-daterange-picker/dist/vuetify-daterange-picker.css';

    export default {
        components: {
            VDateRange,
        },
    }
</script>

results in Unknown custom element: <v-daterange> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Tried

components: {
            'v-daterange': VDateRange,
        },

But got Failed to mount component: template or render function not defined.

[IsmailMouh]

Same bug for me

[praveenpuglia]

Hi,

You are importing VDateRange which is the plugin file and not the real component. DateRange is the component. If you look at the Usage section on how to import this for a single component, you'll see it's slightly different.

// If you want to use in one of your components.
import DateRange from 'vuetify-daterange-picker';
import 'vuetify-daterange-picker/dist/vuetify-daterange-picker.css';

export default {
  components: { DateRange.name: DateRange },
  ...
};

[jama5262]

Hi, what you suggested did not work, if i do what the usage says, it brings an error

You may need an appropriate loader to handle this file type.
|   },
>   components: { DateRange.name: DateRange }
| }

[praveenpuglia]

@jama5262 can you please create a fiddle or codepen link where I can test this?

[psychosis448]

Same issue here

import DateRange from 'vuetify-daterange-picker'
import 'vuetify-daterange-picker/dist/vuetify-daterange-picker.css'

on fresh vue 2.5.17 project, initialized with @vue/cli-service 3.0.5

./src/components/Content.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Content.vue?vue&type=script&lang=js&)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: ______\src\components\Content.vue: Unexpected token, expected "," (323:13)

  321 |   },
  322 |   components: {
> 323 |     DateRange.name: DateRange
      |              ^
  324 |   }
  325 | }
  326 | 

[praveenpuglia]

Can you all try doing

components: { DateRange }

and then in template just use

<DateRange />

instead of

<v-daterange></v-daterange>

[psychosis448]

Then it says that template or render function is not defined:

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

found in

---> <DateRange>

For me that's currently not a problem, as I needed some changes on the DateRangePicker, so I made it into a separate vue SFC, which works fine.

[ProjectINT]

A have the same issue, after a few tries, I I'm was surrender.

[smydolf]

Then it says that template or render function is not defined:

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

found in

---> <DateRange>

For me that's currently not a problem, as I needed some changes on the DateRangePicker, so I made it into a separate vue SFC, which works fine.

I have the same issue :/

[praveenpuglia]

Hi All, I have worked on a V3 of this. Please take a look at the readme. I'll add the presets functionality in a few days.

Would love to get some feedback on that solve all of these issues.

PS. - Thanks for all the patience. I have been away from JS development for some time now and doing full time python at day job. More reason why this project feels abandoned. Happy to receive PRs from all the community and make this component better.