How to get access to Vue.prototype in asyncData?

user_9624816 0
Viewed 416

In plugin, I add new property to Vue prototype.

import Vue from 'vue';
import { DateTime } from 'luxon';

Object.defineProperty(Vue.prototype, '$DateTime', { value: DateTime });

I want to use it in asyncData, how to get access?

async asyncData(context) {
  context.store.commit('calendar/setSelectDate', $DateTime.now());
}
nuxt.js vue.js
2 Answers

I'm not sure that defineProperty is the way to go here. You could maybe inspect the Vue instance itself and see if there is some $DateTime on it, if it is, a context.$DateTime should do the trick.

If it's not working with context.$DateTime, maybe try it when your component is mounted in a regular this.$DateTime on a button click, for debugging purposes.

Using regular Nuxt plugins or even inject is a more clean and Vue-y way of doing things.

import { DateTime } from 'luxon'
export default ({ app }, inject) => {
  inject('DateTime', DateTime)
}

then

async asyncData({ store, $DateTime }) {
  store.commit('calendar/setSelectDate', $DateTime.now())
}

or from components/pages

this.$DateTime.now()

Speaking of Vue, you don't want to use vue-luxon. Looks like a simple and quick way of using the library. Is it because it is not mantained for already 7 months or something else?

user_88165850 
import Vue from 'vue';
async asyncData(context) {
  context.store.commit('calendar/setSelectDate', Vue.prototype.$DateTime.now());
}
user_92676840
Related