Call context in nuxt not working in v-bind-CodePudding

I have question related to using context or prototype in Nuxt

I create a constant for 'modal' name like this:

export default Object.freeze({ 
  MODAL_SHOWPRO: "MODAL_SHOWPRO",
})

I also created constant.js in plugin folder and already added to nuxt config.

import modals from '@/constants/modal';
export default ({ app }, inject) => {  
  inject('modalName', modals)
}

In component I can't call value from v-bind, it said : undefined MODAL_SHOWPRO

<Popup :id="$modalName.MODAL_SHOWPRO" />

but I can call it from $emit function something like this:

@click="$nuxt.$emit('showModal', {id: $modalName.MODAL_SHOWPRO})"

Can you let me know why and how to fix it?

Notice: It will work if: I make data

{
    modal: ''
}

and add to created:

async created() {      
    this.modalName = await this.$modalName
}

CodePudding user response：

Nuxt is a meta-framework aimed at providing an universal app (server then client side). So, you need to think about both server and client.

In your code, you specified ssr: false, this is outdated and should rather be mode: 'client'. But setting so is still false because it means that the ENUM will not be available on the server (hence the error).

Setting it like this is more appropriate (regarding the nature of the plugin) and also fixes the issue

plugins: ['~/plugins/constant.js'],

More on Nuxt plugins: https://nuxtjs.org/docs/directory-structure/plugins#plugins-directory