Vue + Luxon - Format using Luxon Filter

Question

I'm stating to use Luxon in my Vue Components. I have imported the library and it's works.

I use a Luxon filter as:

{{ "2020-10-05T14:48:00.000Z" | luxon }}

This syntax works fine with timestamp format but now I would like to use with anothers format as example:

<div>
    <p>{{ "2020-10-02 10:00:00" | luxon }}</p>
</div>

I have read the official documentation of the npm package and also of the library but I don't get results.

When the component is rendering show this error message:

app.js:101907 [Vue warn]: Error in render: "unparsable"

I know that the problem is the format of the string but I don't know how to change the type of the input format. In the metode works as:

this.$luxon("2020-10-05 22:36", {
    input: { format: "yyyy-MM-dd HH:mm", zone: "Asia/Tokyo" },
    output: "full",
})

But I need to use the filter directly in the rendering component(html). I have tried this:

<template>
    <div>
        <p>{{ "2020-10-02 10:00:00",{
                                       input: { format: "yyyy-MM-dd HH:mm", zone: "Asia/Tokyo"}
                                    } | luxon }}</p>
    </div>
</template>

Obviously it's doesn't works...

Someone Can I help me?

Thanks!

Answer 1

Looking at the Docs and the site this:

<div>
    <p>{{ "2020-10-02 10:00:00" | luxon({ input: {format: "yyyy-MM-dd HH:mm"} } ) }}</p>
</div>

should work properly