I´ve tried everything I can think of to get vue-luxon working on my Laravel 8 / Vue 3 application, but failed misserably. I´ve followed these steps according to the docs:
npm install vue-luxon;
The docs doesn´t say where, but I placed this sentence in my app.js file:
import VueLuxon from "vue-luxon";
As I understand it, this line has to change to App.use(VueLuxon) and is also placed in app.js:
Vue.use(VueLuxon);
And (according to the docs), that´s it... I should be able to call:
this.$luxon("2020-10-05T14:48:00.000Z")
to display a formatted date, but instead I keep getting this error on the console:
Uncaught TypeError: this.$luxon is not a function
Here´s the contents of my resources/js/app.js file:
import { createApp } from 'vue';
import App from './components/App.vue'
import VueLuxon from "vue-luxon";
createApp({
components: {
App,
}
}).mount("#app")
App.use(VueLuxon)
And the contents of my js/components/App.vue file:
<template>
<div class="flex flex--column flex--align-center flex--justify-center">
<div class="logos">
<img src="../../static/img/laravel.png" width="240" alt="" />
<img src="../../static/img/vue.png" width="240" alt="" />
</div>
<div class="title">
<h1 class="vue">Vue 3</h1>
<h1 class="plus">+</h1>
<h1 class="laravel">Laravel 8</h1>
</div>
{{ this.$luxon("2020-10-05T14:48:00.000Z") }}
</div>
</template>
<script>
// import VueLuxon from "vue-luxon"; // I´ve tried importing luxon here... doesn't work either.
export default {
mounted() {
console.log("Component mounted.");
},
};
</script>
I´ve tried placing the imports directly on the component, register as app components, or any possible combination, with the same results. I´m surely missing something, so any help would be much appreciated.
Thanks!
First of all, you do not use "this." in template.
According to official repository, this plugin is NOT compatible with Vue 3, just with Vue 2 only (at least for now).
Source: https://github.com/casbloem/vue-luxon/issues/21
Solutions: