Use filter in Vue3 but can't read globalProperties

Question

Just a quick question,

I know that Vue3 doesn't use filters anymore and notes says use computed or methd instead. but also there is a globalProperties we can use, I used this globalProperties but keep getting this error

Uncaught TypeError: Cannot read property 'globalProperties' of undefined

Does anyone know where is the bug in my code?

const app = {
data() {
    return {
        message: ""
    }
  }
}

app.config.globalProperties.$filters = {
formatDate(value) {

    if (value == "0001-01-01T00:00:00")
        return "";
    var today = new Date(value);
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    var yyyy = today.getFullYear();

    today = dd + '/' + mm + '/' + yyyy;
    return today;
   }
}

Vue.createApp(app).mount('#app');

And I am using the filter in my table like this

    <td>
         {{ $filters.formatDate(incident.incidentData) }}
    </td>

Your question was my answer. How to invoke the filters from within the .vue file — JoeGalind
– JoeGalind, Commented Jul 13, 2022 at 20:09

Boussadjra Brahim · Accepted Answer · 2022-04-25 04:10:20Z

7

The config field belongs to the root instance not to the root component so you should do:

const app = {
data() {
    return {
        message: ""
    }
  }
}
const myApp=Vue.createApp(app)

myApp.config.globalProperties.$filters = {
formatDate(value) {

    if (value == "0001-01-01T00:00:00")
        return "";
    var today = new Date(value);
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    var yyyy = today.getFullYear();

    today = dd + '/' + mm + '/' + yyyy;
    return today;
   }
}

myApp.mount('#app');

Vue.createApp(app) return the root instance

myApp.mount('#app'); after mounting root app to an element it returns the root component

edited Apr 25, 2022 at 4:10

answered Dec 26, 2020 at 10:15

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use filter in Vue3 but can't read globalProperties

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related