LeCoupa / vuetimeline

🕵️‍♀️🕵️‍♂️ One easy-to-use component for Vue.js to build beautiful responsive timelines.
https://www.growthbunker.dev/vuetimeline
MIT License
346 stars 44 forks source link

Expected Date, got Date.. #7

Open elstanto opened 4 years ago

elstanto commented 4 years ago

I am trying out nuxt for the first time, so this may be my cause, but I am getting a confusing error on the dev server console when using your example:

[Vue warn]: Invalid prop: type check failed for prop "date". Expected Date, got Date 01:31:26

found in

---> <Pages/index.vue> at pages/index.vue

at layouts/default.vue This is strange as the props validation shows as a Date, and there doesn't appear to be any errors from creating the new Date object in your example code. Perhaps I've got odd versions, but it's a fresh install of everything from Yarn. Any ideas please? The timeline seems to render correctly and the watcher will update new Date values and not show the error again, but I always get it the first time..
LeCoupa commented 4 years ago

Yes, I get this error too. I don't know what is happening. I have spent hours trying to figure it out. If you solve this issue, please, tell me. 🙏

somed00d commented 4 years ago

I can get this to work with this innuxt.config.js:

plugins: [
{ src: '~/plugins/timeline.js', ssr: false },
],

timeline.js:

import Vue from 'vue';
import Vuetimeline from '@growthbunker/vuetimeline';

Vue.use(Vuetimeline);

components/HomeWire.vue:

<template>
    <div>
        <!-- Latest update -->
        <vue-timeline-update
            :date="new Date('2017-02-26')"
            title="v2.2.0 - Initial D"
            description="Today I am thrilled to announce the release of Vue.js 2.2.0."
            thumbnail="~/assets/images/opium.jpg"
            category="announcement"
            icon="code"
            color="red"
        />

        <!-- Another update -->
        <vue-timeline-update
            :date="new Date('2016-11-22')"
            title="v2.1.0 - Hunter X Hunter"
            description="Today I am thrilled to announce the release of Vue.js 2.1.0."
            thumbnail="~/assets/images/opium.jpg"
            category="announcement"
            icon="code"
            color="turquoise"
        />

        <!-- Yet another update -->
        <vue-timeline-update
            :date="new Date('2016-09-30')"
            title="v2.0.0 - Ghost in the Shell"
            description="Today I am thrilled to announce the release of Vue.js 2.0.0"
            thumbnail="~/assets/images/opium.jpg"
            category="announcement"
            icon="code"
            color="white"
            is-last
        />
    </div>
</template>

<script>
export default {};
</script>

<style></style>

A new issue arises though in that I can't get images to load. And it seems because they aren't getting picked up by the nuxtjs loader because the URLs aren't transformed.

GET http://localhost:3000/~/assets/images/opium.jpg 404 (Not Found)

That same page, not component, loads the same picture in a different place(just using it for the timeline for testing) which shows the properly transformed link:

GET http://localhost:3000/_nuxt/assets/images/opium.jpg

So that's where I am at in debugging I guess. @helgrind if setting ssr: false fixes your issue than this one can be closed and a new one opened for the assets not being picked up since it's different from yours.