How to use proccess.env variable in v-bind attribute?

Question

I'd like to use the global objects especially proccess.env variable in v-bind attribute.

<base-pagination
        v-model="currentPage"
        :per-page="process.env.PAGE_SIZE"
        :total="totalPages"
        @change="handleChange"
 ></base-pagination>

It says

[Vue:warn] Property or method "process" is not defined on the instance

How to use the global objects(console, process, ...) in Vue.js template?

Answer 1

As far as I am concerned this is not possible because:

Whenever you are using templates in vue you are also using vue template compiler in one way or another. All template expressions will be turned into render functions, and the source code that the template compiler generates looks like this:

with(this){return _c('div',[_m(0),(message)?_c('p',[_v(_s(message))]):_c('p',[_v("No message.")])])}

Note the with(this) statement at the beginning. Every reference in the remaining function will therefore always be accessed on the instance.

However you can always create a computed property and use this value:

...
computed: {
   PAGE_SIZE: () => process.PAGE_SIZE
}

Answer 2

You can't use it directly in the html, you could add it to the created hook. Why in the created hook. When defining it in the created hook it is not reactive. Note: you don't have to define pageSize in the data.

created () {
    this.pageSize= process.env.PAGE_SIZE
}

<base-pagination
        v-model="currentPage"
        :per-page="pageSize"
        :total="totalPages"
        @change="handleChange"
 ></base-pagination>